单击时发送 *ngFor 值作为参数答案

【问题标题】：Send *ngFor value as parameter on click单击时发送 *ngFor 值作为参数
【发布时间】：2017-02-20 03:37:52
【问题描述】：

我正在 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

【问题讨论】：

/userslist.component.html:22:16 的代码是什么？
您能发布您的完整组件吗？ selectedParam 应定义为 EventEmitter 并在此处使用 Output() 进行注释。
你也可以在你的数据中尝试$event($event)。 $event 包含所有值和引用

标签： angular typescript data-binding

【解决方案1】：

你需要像这样在组件中创建一个公共数组。

公共用户数据：任何；

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】：

查看EventEmitter documentation，您的自定义组件应该基本上看起来像那里的示例，实现Output() 指令和EventEmitter

【讨论】：

【解决方案3】：

使用[(ngModel)] 将数据以两种方式绑定到组件。如下所示

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

也试试

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

}

您可以在 [] 和 () 符号的 angular2 方面获得更多参考

【讨论】：