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

Answer 2

我发现，为了正确导入JSON文件，我必须将以下内容添加到我的 tsconfig.json 中：


    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        ...
    }

角度：将JSON数据传递到子组件

2 个答案: