I created a table of players class (fullname, position and ranking), the table has c checkbox for each raw. How can I implement so when I click on the checkbox, the value of the player (for that raw) will appear in the html?
the HTML code:
<tbody>
<tr *ngFor="let player of bullsPlayers; let i = index;">
<td></td>
<td></td>
<td></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> </div>
TS code (only related lines):
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);
}
}
}
Aucun commentaire:
Enregistrer un commentaire