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

Posted 2023-02-23

【中文标题】单击时发送 *ngFor 值作为参数

【英文标题】：Send *ngFor value as parameter on click

【发布时间】：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 包含所有值和引用

【参考方案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 方面获得更多参考