为什么按下按钮时（点击）不触发？答案

【问题标题】：Why doesn't the (click) fire when pressing button?为什么按下按钮时（点击）不触发？
【发布时间】：2021-05-06 01:50:40
【问题描述】：

我一直在尝试使用此循环创建 html 元素，但由于某种原因，该按钮似乎根本没有触发。有什么想法可以解决这个问题吗？

let newListItem: any = '';
this.listArray.forEach((element, index) => {
   newListItem += `<ion-item>${element}</ion-item><ion-button (click)="console.log(${index})" fill="outline" slot="end"  color="danger")>remove</ion-button>`;
});
    itemList.innerHTML = newListItem;

【问题讨论】：

点击事件不会触发，因为您的按钮是动态创建的。 stackoverflow.com/questions/57345596/…

标签： typescript ionic-framework

【解决方案1】：

Angular 事件发射器和输入/输出必须从您的 HTML 组件声明转换为有效的 HTML。这不是在运行时完成的，而是在 Angular 构建过程中完成的 (ng build)。

因此，您尝试使用此代码实现的目标是不可能的。

您应该做的是使用ngFor 遍历HTML 页面中的listArray。将listArray 声明为类的公共成员，然后从模板访问它。你需要一些 HTML 标签来包裹内容，我将使用ion-item:

<ion-item *ngFor="let element of listArray; let i = index">
    <ion-item>{{element}}</ion-item>
    <ion-button (click)="console.log({{index}})" fill="outline" slot="end"  color="danger">remove</ion-button>
</ion-item>

PS：要从列表中删除项目，我认为这是您在“删除按钮”中的以下意图，您可以调用splice：

<ion-button (click)="this.listArray.splice({{index}}, 1)" fill="outline" slot="end"  color="danger">remove</ion-button>

PS2：如果你的element对象中有HTML标签，它们不会被这段代码处理，你应该在这种情况下使用[innerHTML]（虽然强烈建议不要这样做，因为它会带来性能和安全问题）

【讨论】：