Wie durch Klicken auf die Tabellenzeile in Schräg 2

Question

einen div zeigen, dass ich eine App mit Angular mache 2. Es gibt einen Tisch *ngFor von Angular 2. Code wie unter Verwendung ist,

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

Jetzt Ich möchte die Spielerinformationen der jeweiligen Mannschaft zeigen, nachdem ich den Namen der Mannschaft so angeklickt habe, dass nur die Spieler der jeweiligen Mannschaft anwesend sind. Und auf den Klick des Team-Namens klicken Sie erneut/klicken Sie auf einen anderen Team-Namen, der versteckt wäre.

Ich rufe den Service an, um die Spielerinformationen des Teams richtig zu bekommen. Aber ich bin verwirrt, wie man mit Angular 2 zeigt.

Answer 1

Ich habe keine Ahnung, wie Sie die Daten erreichen, aber wenn die Liga kommt mit einer Vielzahl von Teams, und das Team hat eine Reihe von Spielern, dann ist das einfach.

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

, dass der Kern der Idee ist, dann, wenn Sie die übrigen Spieler schließen möchten, wenn Sie auf einem anderen Team klicken so sein würde:

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

Auch wenn es nicht die gleiche Struktur ist Natürlich ist es bei Angular so, wie Sie es mit Angular machen, also können Sie es an die Art und Weise anpassen, wie Sie die Daten erhalten, aber definitiv würde ich Ihnen empfehlen, die API nicht in jedem Klick aufzurufen, um die Spieler zu bekommen. In diesem Fall Sie müssen darüber nachdenken, ob der Benutzer ständig klickt? Verzögerungen? Daten verbrauchen? ;)