samedi 2 décembre 2017

Angular 2 Checkbox value

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