Angular 2 Checkbox Wert

Question

Ich erstellte eine Tabelle der Spieler-Klasse (Fullname, Position und Ranking), die Tabelle hat Kontrollkästchen für jedes rohe. Wie kann ich das implementieren, wenn ich auf das Kontrollkästchen klicke, wird der Wert des Players (für das rohe) im HTML erscheinen?

der HTML-Code:

<tbody> 
    <tr *ngFor="let player of bullsPlayers; let i = index;"> 
     <td>{{player.fullName}}</td> 
     <td>{{player.position}}</td> 
     <td>{{player.ranking}}</td> 
     <td><input type="checkbox" class="form-check-input" [id]="bullsPlayers[i]" [name]="bullsPlayers[i]" 
     value="player.fullName" (change)="addOrRemoveBullsPlayer($event.target.value)" /></td> 
    </tr> 
    </tbody> 
</table> 

<div>{{selectedBullsPlayers}} </div> 

TS-Code (nur im Zusammenhang Linien):

bullsPlayers = []; 
selectedBullsPlayers = []; 

    constructor(private _playerService: PlayerService) {} 

    ngOnInit(){ 
    this._playerService.getPlayers() 
    .then(players => this.players = players) 
    .catch(error => console.log(error)); 

    this._playerService.getBullsPlayers() 
    .then(players => this.bullsPlayers = players) 
    .catch(error => console.log(error)); 
    } 

    addOrRemoveBullsPlayer(value: string) { 
    var indexOfEntry = this.selectedBullsPlayers.indexOf(value); 
    if(indexOfEntry < 0) { 
     this.selectedBullsPlayers.push(value); 
    } else { 
     this.selectedBullsPlayers.splice(indexOfEntry, 1); 
    } 
    } 

} 

Answer 1

Verwendung ngModel Richtlinie und binden Sie es an player.selected

html:

<td><input type="checkbox" class="form-check-input" [id]="bullsPlayers[i]" [name]="bullsPlayers[i]" [(ngModel)]="player.selected" value="player.fullName" (change)="updateBullsPlayer()" /></td> 

component.ts:

updateBullsPlayer() { 
     this.selectedBullsPlayers = selectedBullsPlayers.filter((item) => item.selected) 
    } 

mach dir keine Sorgen über selected f Feld wird automatisch von ngModel

Answer 2

Änderung

 value="player.fullName" 

zu

 [value]="player.fullName" 

Oh, und Ihre Anzeige div in etwas ändern wie

 <div *ngFor="let playerFullName of selectedBullsPlayers">{{playerFullName}}</div>