web-dev-qa-db-fra.com

Envoyer la valeur * ngFor en tant que paramètre au clic

Je fais une petite application dans Angular 2, j'affiche un tableau avec des données. Je veux obtenir ces données en cliquant sur mon tableau

Voici le code:

Modèle HTML:

<tr *ngFor="let users of usersdata; let i = index">
     <td (click)="data(users.username)">{{users.username}}</td>
     <td (click)="data(users.email)">{{users.email}}</td>
     <td (click)="data(users.id)">{{users.id}}</td>
     <td (click)="data(users.roleId)">{{users.roleId}}</td>
</tr>

Ceci est mon composant:

data(data: string) {
    this.selectedParam.emit(data);
    console.log(data);
}

Quand je fais clic je reçois cette erreur:

EXCEPTION: Error in .../userslist.component.html:22:16 caused by: self.parent._el_24 is not a function
angulartypescriptdata-binding
4
Danny908

utilisez [(ngModel)] pour lier deux fois vos données à votre composant. comme ci-dessous

<td [(ngModel)]="users.username" (click)="data(users.username)">{{users.username}}</td>

Essayez aussi 

//$event will hold value and other reference.
data($event: any) {

}

Vous pouvez obtenir plus de références côté angular2 en notation [] et ()

8
Aniruddha Das

Vous devez créer un tableau public dans le composant en tant que tel.

utilisateurs publicsdata: any;

data(data: string) {
this.usersdata = data;
console.log(this.usersdata);

} Maintenant, vous pouvez accéder au modèle HTML 

<tr *ngFor="let users of usersdata; let i = index">
 <td (click)="data(users.username)">{{users.username}}</td>
 <td (click)="data(users.email)">{{users.email}}</td>
 <td (click)="data(users.id)">{{users.id}}</td>
 <td (click)="data(users.roleId)">{{users.roleId}}</td>


data(data: string) {
this.selectedParam.emit(data);
console.log(data);

}

Ci-dessus, ne conservez pas le nom de la fonction et le nom du paramètre car cela pourrait causer des problèmes. Changer le nom du paramètre 

data(datavalue: string) { 
  this.selectedParam.emit(datavalue); 
  console.log(datavalue);

}

2
user2215155

Voir la documentation EventEmitter , votre composant personnalisé devrait ressembler à l'exemple présenté ici, en implémentant la directive Output() et un EventEmitter.

0
Oliver Hader