如何通過單擊Angular 2中的表格行顯示div

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吸引玩家，在這種情況下，您需要考慮如果用戶一直在單擊該怎么辦？ 延遲？ 數據消耗？ ;）