2017-05-30 56 views
0

我使用將某個應用顯示一個div角2 有一臺採用了棱角分明2.代碼的*ngFor就像下面,如何通過單擊錶行中角2

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

現在我想通過點擊球隊名稱來顯示特定球隊的球員信息,只有特定球隊的球員將在那裏。再次點擊球隊名稱/點擊其他球隊名稱將被隱藏。

我打電話給服務,以正確地獲得球隊的球員信息。但弄糊塗如何使用Angular2展示。

回答

0

我不知道你的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

即使它是不一樣的結構的數據(當然不是這樣),所以你可以在獲取數據的方式上適應它,但是我肯定會建議你在每次點擊獲取玩家時都不要調用api,在這種情況下你需要考慮用戶是否一直點擊都會怎麼樣?延遲?數據消費? ;)