传递参数onclick，在循环中使用angular 8

Question

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

Angular代码：

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

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

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

Answer 1

如果你使用 Angular 那么你应该使用 (click) 因为当你声明一个事件处理程序时你需要环绕 DOM 事件名称 in parentheses 并为其分配一个 template statement。

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

Answer 2

事件绑定：版本 1 on-click="function"，版本 2（点击）="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>

传递参数onclick，在循环中使用angular 8

Passing parameter onclick, in a loop using angular8

javascript

parameter-passing

angular8

ngfor