Извлекать данные из вложенного массива

Question

Я перепробовал почти все, но я продолжаю бороться с HTML для извлечения моего массива.

Я получаю список команд, но игроки (потомки) каждой команды не появляются.

Это должно быть как;

• КОМАНДА A
• • PLAYER1
• • PLAYER2

HTML

 <h3>Registered teams</h3>
 <ul>
  <li *ngFor='let team of teams;let i = index'>{{ team.Name }} (id: {{ team.id }})
    <ul>
        <li *ngFor='let players of team.players;let j = index'>{{ player.Name }} ({{ players.id }})</li>
    </ul>
  </li>
</ul>

JSON

    "id": 1,
    "Name": "TEAM A",
    "Active": true,
    "created_at": "2019-09-12T13:56:52.045Z",
    "updated_at": "2019-09-12T14:30:42.533Z",
    "Players": [
      {
        "id": 1,
        "Name": "PLAYER1",
        "Active": null,
        "created_at": "2019-09-12T13:56:41.496Z",
        "updated_at": "2019-09-12T14:30:42.540Z"
      },
      {
        "id": 2,
        "Name": "PLAYER2",
        "Active": true,
        "created_at": "2019-09-12T14:00:12.149Z",
        "updated_at": "2019-09-12T14:30:42.540Z"
      }

model.ts

export class Team {
id: number;
name: string;
active: boolean;
players: {
    id: number;
    name: string;
}}

Answer 1

Ваш JSON возвращается Players, и вы ссылаетесь на players, и вы написали let players of team.players.

Это должно быть:

<li *ngFor='let players of team.Players;let j = index'>{{ players.Name }} ({{ players.id }})</li>