Question

我只是想知道您是否可以通过我的json文件分配接口来解决此问题。我收到json文件的ts错误，无法分配给Data类型。 .ts文件中将“数据”声明为一种数据类型。

  this.data = '../assets/data.json';

  export interface Data {
      millers: Miller[];
  }

  export interface Miller {
      name: string;
      address: string;
      farms: Farm[];
  }

  export interface Farm {
     code: string;
     name: string;
     harvest: string;
     type: string;
     paddocks: Paddock[];
  }

  export interface Paddock {
     code: string;
     area: string;
     owner: string;
  }


  {
  "millers": [
    {
      "name": "Britney Houston",
      "address": "Summit Street Haena",
      "farms": [
        {
          "code": "deserunt840",
          "name": "Artiq",
          "harvest": "2012-06-26",
          "type": "Cane",
          "paddocks": [
            {
              "code": "do318",
              "area": 965
            },

Answer 1

编辑：

您可以使用requirejs读取JSON文件。请查看此问题以获取更多详细信息：Angular 5 Service to read local .json file。

this.data = '../assets/data.json';

这是您的问题。您在这行上所做的所有工作都是为String分配一个this.data值。正如您提到的，this.data的类型为Data，而不是字符串。因此错误

现在，回到您的问题，您无法从JSON文件读取数据（据我所知。）。如果需要，可以将该JSON文件转换为.ts文件，然后从该文件导出数据。那么您可以将其导入并分配给this.data或其他任何属性

Answer 2

如前所述，您正在为声明为string类型的属性分配Data值。

要修复它：

确保您在angular.json的architect.build.options中具有以下内容：

"assets": [
  "src/favicon.ico",
  "src/assets",
],

在millers.json中创建一个src/assets文件。
将HttpClientModule导入模块中，并将其添加到imports数组中。
将HttpClient作为依赖项插入到您的组件中，然后使用它的get方法来调用.json，该方法公开为API文件：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({...})
export class AppComponent {
  data;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('../assets/millers.json')
      .subscribe(res => console.log(res));
  }
}

这是您推荐的Sample StackBlitz。

Angular-将json文件分配给类

2 个答案: