在 Angular 中访问界面时出错

Question

我正在尽力而为，但在访问数据时出现类型错误。需要帮助。

我有一个json如下

[{
  "productType": "Electronics",
  "modelDetails": [
    {
      "modelId": "I Kall K 48",
      "modelPrice": 759,
      "specifications": {
        "memory": "32 MB RAM | 64 MB ROM",
        "display": "4.57 cm (1.8 inch) Display",
      }
    }, 
    {
      "modelId": "I Kall K 48",
      "modelPrice": 759,
      "specifications": {
        "memory": "32 MB RAM | 64 MB ROM",
        "display": "4.57 cm (1.8 inch) Display",
      }
    }
  ]
}]

下面是我定义了接口的 ts 文件。

import { Component, OnInit } from '@angular/core';

import productsData from './jsonFile3.json';

interface Product {
    productType: String,
    modelDetails: ModelDetails
}

interface ModelDetails {
    modelId: String,
    modelPrice: Number,
    specifications:Specifications
}

interface Specifications {
  memory: String,
  display: String,
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'ngapplication';
  name = 'Angular';
  products: Product[] = productsData;
}

我收到错误消息

error TS2322: Type '{ productType: string; modelDetails: { modelId: string; modelPrice: number; specifications: { memory: string; display: string; }; }[]; }; }[]' is not assignable to type 'Product[]'.

此外，如果 modelDetails 中只有单个数据，那么它会被捕获，但是当它变成一个对象数组时，即使在声明 modelDetails: ModelDetails[] 之后，它仍然不会被渲染。

谁能帮我解决这个问题？？

谢谢

Answer 1

这里 'productsData' 您正在访问的是对象，您正试图将其直接分配给基于数组的变量 'products'。这就是为什么它向您显示错误。我认为您应该将 'productsData' 作为数组元素推送，例如 array.push(productsData)。至少尝试一下。

Answer 2

你需要定义喜欢；

interface Product {
    productType: String,
    modelDetails: ModelDetails[]
}

因为在 JSON 中，您的 ModelDetails 是一个数组。

Answer 3

最后，结合Hit-n-Trial方法，根据@Chris的上述回复，我得以解决。以下是我应用的解决方案：

在ts文件中，ModelDetails定义为数组接口：

 interface Product {
     productType: String,
     modelDetails: ModelDetails[];
 }

 interface ModelDetails {
     modelId: String,
     modelPrice: Number
 }

而在HTML文件中，渲染部分如下：

 <div *ngFor="let modelDetail of product.modelDetails">
     <div class="modelId">{{modelDetail.modelId}}</div>
     <div class="modelPrice">{{modelDetail.modelPrice}}</div>
 </div>

感谢大家的回复和帮助。

在 Angular 中访问界面时出错

Getting error in accessing Interface in Angular

typescript

angular

angular12