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
    }
  ]
}

問題是：

• 我的思考方式正確嗎？
• 如何透過 Observable Service 讀取這些資料，並讀寫像 test.person.speed 這樣的物件？

答案＃1

僅使用一個介面進行簡化，一個好的範例是：

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

你不需要另一個介面來僅僅保存 PersonData 的引用

Person 介面看起來不必要，因為你可以簡單地創建指向 PersonData 介面的引用陣列。

let personData : PersonData[]

然後可以像 personData[i].id 或 personData[i].speed 一樣存取它們