Question

我尝试了解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
    }
  ]
}

问题是：

我的思维方式正确吗？
如何通过Observable Service读取此数据并读写诸如test.person.speed之类的对象？

Answer 1

您不需要其他接口即可保存PersonData的引用

Person接口似乎是不必要的，因为您可以简单地创建指向PersonData接口的引用数组。

let personData : PersonData[]

然后像personData[i].id或personData[i].speed一样访问它们

Answer 2

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

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

嵌套接口

2 个答案: