Показать клик по вложенному массиву

Question

Я получил массив с командами и в этом массиве с игроками.

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

Я создал кнопку, чтобы открыть всех игроков в составе родителя (команды).

HTML

<button (click)="hidden = !hidden" href="#">{{!hidden ? 'Show players' : 'Hide players'}}</button>
    <hr>
     <ul>
      <li *ngFor='let team of teams'>{{ team.Name }} (id: {{ team.id }})
        <ng-container *ngIf="hidden" class="hidden">
            <ul>
                <li *ngFor="let player of team.Players">{{ player.Name }} ({{ player.id }})</li>
            </ul>
        </ng-container>
      </li>
    </ul>

Теперь, когда я нажму эту кнопку, на ней будут показаны все дочерние элементы (игроки) каждой команды.

Вопрос Я бы очень хотел сделать эту функцию клика для самой команды, чтобы только элементы выбранной команды были открытыми, а не всеми.Как мне этого добиться?

Answer 1

HTML-шаблон

<li *ngFor='let team of teams' (click)="team.showTeam=!team.showTeam">{{ team.Name }} (id: {{ team.id }})
        <ul *ngIf="team.showTeam">
            <li *ngFor="let player of team.Players">{{ player.Name }} ({{ player.id }})</li>
        </ul>
</li>

Массив команд

teams: Array<any> = [
    {
      "id": 1,
      "Name": "TEAM A",
      "Active": true,
      "created_at": "2019-09-12T13:56:52.045Z",
      "updated_at": "2019-09-12T14:30:42.533Z",
      "showTeam":false,
      "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"
        },
        {
          "id": 3,
          "Name": "PLAYER3",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },{
          "id": 4,
          "Name": "PLAYER4",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },{
          "id": 5,
          "Name": "PLAYER5",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },
        {
          "id": 6,
          "Name": "PLAYER6",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },
        {
          "id": 7,
          "Name": "PLAYER7",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },
        {
          "id": 8,
          "Name": "PLAYER8",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },
        {
          "id": 9,
          "Name": "PLAYER9",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        }
        ,{
          "id": 10,
          "Name": "PLAYER10",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },
        {
          "id": 11,
          "Name": "PLAYER11",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },
        {
          "id": 12,
          "Name": "PLAYER12",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        }
      ]
    },
    {
      "id": 2,
      "Name": "TEAM B",
      "Active": true,
      "showTeam":false,
      "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"
        },
        {
          "id": 3,
          "Name": "PLAYER3",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },{
          "id": 4,
          "Name": "PLAYER4",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },{
          "id": 5,
          "Name": "PLAYER5",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },
        {
          "id": 6,
          "Name": "PLAYER6",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },
        {
          "id": 7,
          "Name": "PLAYER7",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },
        {
          "id": 8,
          "Name": "PLAYER8",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },
        {
          "id": 9,
          "Name": "PLAYER9",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        }
        ,{
          "id": 10,
          "Name": "PLAYER10",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },
        {
          "id": 11,
          "Name": "PLAYER11",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        },
        {
          "id": 12,
          "Name": "PLAYER12",
          "Active": true,
          "created_at": "2019-09-12T14:00:12.149Z",
          "updated_at": "2019-09-12T14:30:42.540Z"
        }
      ]
    }
  ]

Answer 2

Вместо того, чтобы использовать переменную, присоедините какое-либо свойство к вашей модели команды и используйте его, чтобы скрыть / показать игрока, чтобы ваш код был похож на

<li *ngFor='let team of teams' (click)="team.showPlayers=!team.showPlayers">{{ team.Name }} (id: {{ team.id }})
        <ng-container *ngIf="team.showPlayers">
            <ul>
                <li *ngFor="let player of team.Players">{{ player.Name }} ({{ player.id }})</li>
            </ul>
        </ng-container>
      </li>

, не забудьте добавить свойство showPlayers в командумодель, иначе вы можете получить ошибку в вашей сборке продукта

рабочая демо