web-dev-qa-db-ja.com

クリック時に* ngFor値をパラメーターとして送信

Angular 2、少しデータを含むテーブルを表示しています。テーブルをクリックしたときにそのデータを取得したいのですが、

これがコードです：

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>

これは私のコンポーネントです：

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

クリックすると、このエラーが発生します。

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

[(ngModel)]を使用して、データをコンポーネントに双方向バインディングします。以下のように

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

またお試しください

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

}

[]および（）表記でangular2側でより多くの参照を取得できます

8
Aniruddha Das

コンポーネントのようにパブリック配列を作成する必要があります。

public usersdata：any;

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

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

}

上記の場合、問題が発生する可能性があるため、関数名とパラメーター名は同じにしないでください。パラメータの名前を変更する

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

}

2
user2215155

EventEmitterのドキュメント を参照してください。カスタムコンポーネントは、基本的にはOutput()ディレクティブとEventEmitterを実装した例のようになります。

0
Oliver Hader