2

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

2 回答 2

1

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

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

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

于 2019-09-14T04:29:48.410 回答
0

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


    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        ...
    }
于 2019-09-15T19:53:33.253 回答