Angular：将 JSON 数据传递给子组件答案

【问题标题】：Angular: pass JSON data to child componentAngular：将 JSON 数据传递给子组件
【发布时间】：2019-09-14 04:20:49
【问题描述】：

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

【问题讨论】：

这个问题已经被问及回答了：stackoverflow.com/questions/46110342/…
我已经应用了推荐的解决方案作为该问题的解决方案，但没有帮助。
如果您自己找到了解决方案，请发布答案并标记为正确

标签： javascript json angular typescript

【解决方案1】：

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

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

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

【讨论】：

我完全复制了那个文件结构和代码，仍然没有。我在 Angular 8.2.6
我在相同的文件夹结构中与 json 共享示例，可能是您的文件夹结构中 json 文件的路径不同
我已将您的参考代码复制到由 Angular CLI 生成的全新项目中。运行 ng serve 命令不会返回任何错误，并且 firefox Web 控制台也没有显示任何问题。文件结构完全相同。页面上没有显示任何内容。如果我复制 JSON 文件的内容并设置 json = {"caseFileID": "1234567"}，数据会显示在页面上。
如果您对 json 进行硬编码并且如果它有效，那么问题在于导入的数据，您能否在 stackblitz 中重现相同的问题，类似于此 - stackblitz.com/edit/angular-f1hxf9?file=src/app/…

【解决方案2】：

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


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

【讨论】：