javascript - Angular:将 JSON 数据传递给子组件

Question

我有一个段落和应用程序组件，以及一个 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,
        ...
    }

Answer 1

要达到预期结果，请使用正确路径的 jsondatasample1.json 文件

   import * as data from './JsonDataSample1.json'

供引用的示例工作代码- https://stackblitz.com/edit/angular-f1hxf9?file=src/app/app.component.ts