时间戳

首页 > 解决方案 > 在嵌套数组上显示 onclick

arrays - 在嵌套数组上显示 onclick

问题描述

我得到了一个包含团队的数组，并且在该数组中包含了一个包含球员的数组。

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>

现在，当我单击该按钮时，它将显示每个团队的所有孩子（球员）。

问题 我真的很想在团队本身上制作这个点击功能，这样只有所选团队的项目才会被打开而不是全部。我怎样才能做到这一点？

标签： arraysangularonclick

解决方案

而不是使用变量将一些属性附加到您的团队模型并使用它来隐藏/显示播放器，因此您的代码应该像

<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属性添加到团队模型，否则您可能会在产品构建中出错

工作演示

推荐阅读