我有一个段落和应用程序组件,以及一个 JSON 文件:
应用组件:
//app.component.ts
import { Component, OnInit } from '@angular/core';
import * as data from 'JsonDataSample1.json'
@Component({
selector: 'app-root',
template: `<app-paragraph [value]='json.caseFileID'></app-paragraph>`,
})
export class AppComponent{
json = data
title = 'af-bifurcated';
}
段落组件:
//paragraph.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-paragraph',
template: `{{ value }}`,
styleUrls: ['./paragraph.component.css']
})
export class ParagraphComponent {
@Input() value: string;
}
JSON:
{
"caseFileID": "1234567",
"pdaSubmitterEntity": "Submitter 1",
"propertyDataCollectorName": "Data Collector 1",
"propertyDataCollectorType": "APPRAISER",
"stateCredentialID": "007",
"licenseState": "CA",
"licenseExpiration": "09\/18\/2019"
}
当我尝试将导入的 JSON 对象传递给子组件时,没有任何显示。但是,如果我不导入 JSON,而是复制它并将 json 的值硬编码为等于我从文件中复制的任何值,则代码有效。我在这里做错了什么?为什么导入的JSON传不过去?
更新
我发现为了正确导入 JSON 文件,我必须将以下内容添加到我的 tsconfig.json:
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
...
}
最佳答案
要达到预期结果,请使用正确路径的 jsondatasample1.json 文件
import * as data from './JsonDataSample1.json'
供引用的示例工作代码- https://stackblitz.com/edit/angular-f1hxf9?file=src/app/app.component.ts
关于javascript - Angular:将 JSON 数据传递给子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57932408/