javascript - 使用 angular8 在循环中传递参数 onclick

Question

我有一个对象数组。我在循环中迭代它并将每个项目的名称传递给onclick ，它以资产文件夹openIt(val)中的文件中的函数为目标。app.jsIE

角代码：

<div *ngFor="let item of listArray">
<button class="tabopen" onclick="openIt(item.name)">{{item.name}}</button>
</div>

app.js 代码：

function openIt(data) {
console.log(data);
}

在app.js 文件中的openIt 函数中，我没有得到item.name。在我的控制台中，它显示项目未定义的错误。但是当我传递静态数据时，即onclick="openIt('sample_data')"它没有显示任何错误。

即使 item.name 也存在，我也得到了正确的值。我不明白为什么我不能将迭代数据传递给参数。

Answer 1

如果您正在使用，Angular那么您应该使用，(click)因为当您声明事件处理程序时，您需要将事件名称括起来并为其分配一个模板语句。DOM parentheses

<button class="tabopen" (click)="openIt(item.name)">{{item.name}}</button>

Answer 2

事件绑定：版本 1 on-click="function"，版本 2 (click)="function"

<div *ngFor="let item of listArray">
<button class="tabopen" on-click="openIt(item.name)">{{item.name}}</button>
</div>

<div *ngFor="let item of listArray">
<button class="tabopen" (click)="openIt(item.name)">{{item.name}}</button>
</div>