使用 angular8 在循环中传递参数 onclick答案

【问题标题】：Passing parameter onclick, in a loop using angular8使用 angular8 在循环中传递参数 onclick
【发布时间】：2020-04-25 16:00:48
【问题描述】：

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

角度代码：

<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。在我的控制台中，它显示 item is not defined 的错误。但是当我传递静态数据时，即onclick="openIt('sample_data')"它不会显示任何错误。

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

【问题讨论】：

使用（点击）="功能"。
我想在我的 app.js 文件中定位函数，该文件不在同一个组件中。当我使用（单击）时，它会在我的 .ts 文件中查找 openIt() 并显示 openIt 不是函数
所以基本上你想调用另一个组件的函数，你可以使用共享服务看这个例子（stackblitz.com/edit/angular-shared-service）
@SameerKhan 不，我希望我的组件与资产文件夹中的简单 app.js 文件进行通信
@AhmadHabib 你在使用 angularJs 还是 angular>=2

标签： javascript parameter-passing angular8 ngfor

【解决方案1】：

事件绑定：varsion 1 on-click="function", version 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

但是，它不会在同一个组件的TS文件中寻找函数吗？由于某些原因，我想在 app.js 文件中定位一个函数
@AhmadHabib 如果以前的版本适合你，那么这应该也可以，因为我只是用click的角度版本更改了事件处理程序
我厌倦了这个，但它说 openIt() 没有定义，因为它正在同一个组件中寻找这个函数。我仍然想在位于 assets 文件夹中的 app.js 文件中定位 openIt() 函数。
@AhmadHabib，那么您应该在当前组件中声明一个函数，该函数从 app.js 调用另一个函数
那行得通。我用 (click) 事件调用了当前组件中的一个函数，并从该事件中调用了我的 app.js 文件中的 openIt()。非常感谢你，伙计。非常感谢