时间戳

首页 > 解决方案 > 嵌套接口

json - 嵌套接口

问题描述

我试图理解 Angular 5/TS 中的嵌套接口，但我无法达到任何正确的点。我创建了两个接口：

export  interface Person {
    person: PersonData;
}

export interface PersonData {
    id: number;
    speed: number;
    weigth: number;

}

我还模拟了一个 JSON 服务器：https ://www.jasonbase.com/things/VmaZ.json （见下文）。

{
  "person": [
    {
      "id": 1,
      "speed": 100,
      "weigth": 20
    },
    {
      "id": 2,
      "speed": 70,
      "weigth": 20
    },
    {
      "id": 4,
      "speed": 10,
      "weigth": 30
    }
  ]
}

问题是：

标签： jsonangulartypescript

解决方案

仅使用一个接口进行简化，一个很好的示例是：

export  interface Person {
    id: number;
    speed: number;
    weigth: number;
}

在你的组件中：

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

import { Person } from './person'; // get interface
import data from './person.mock.json'; // get mock

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  people: Person[] = data.person;
}

并循环如下：

<ul>
  <li *ngFor="let person of people">
   id {{person.id}} | speed {{person.speed}}  | weight {{person.weigth}} 
  </li>
</ul>

工作示例：StackBlitz

推荐阅读