Question

我正在使用Angular 2制作应用。有一个表使用Angular 2的*ngFor。代码如下，

<tr *ngFor="let l of league">
            <td>{{l.position}}</td>
            <td> <img [src]="l.crestURI" [alt]="l.teamName" width="50px" height="50px"><a href="#" (click)="getTeams(l._links.team.href); showPlayers == true">{{l.teamName}}</a>              </td>
            <td>{{l.playedGames}}</td>
            <td>{{l.wins}}</td>
            <td>{{l.losses}}</td>
            <td>{{l.points}}</td>
            <td>{{l.goals}}</td>
            <td>{{l.goalsAgainst}}</td>
            <td>{{l.goalDifference}}</td>
          </tr>

现在，我希望在点击团队名称之后显示特定团队的玩家信息，以便只有特定团队的玩家才会在那里。再次单击团队名称/单击其他团队名称将隐藏。

我致电该服务以正确获取球队的球员信息。但是对如何使用Angular 2进行展示感到困惑。

Answer 1

我不知道你的api是如何实现这些数据的，但如果联盟中有各种各样的球队，并且球队有一系列球员，那么这很容易。

 <tr *ngFor="let team of teams; let i = index">
     <td>{{team.position}}</td>
     <td>{{team.teamName}}</td>
     <td (click)="itemsVisibility[i] = !itemsVisibility[i]">
         {{team.teamName}}
         <div *ngIf="itemsVisibility[i]">
            <p *ngFor="let player of team.players"></p>
         </div>
     </td>
     ...
     <td>{{l.points}}</td>
 </tr>

这是这个想法的核心，那么如果你想在关闭其他球员后关闭其他球员就会是这样的：

http://plnkr.co/edit/u2YE2EvH0W7pmOKrDb44?p=preview&open=app%2Fapp.component.ts

即使它与数据的结构不一样（当然不是），它是如何用Angular完成的，所以你可以根据获取数据的方式进行调整，但我肯定建议你不要调用api每次点击获取玩家，在这种情况下你需要考虑用户是否一直点击？延迟？数据消耗？ ;）

如何通过单击Angular 2中的表行来显示div

1 个答案: