Question

我一直在尝试使用此循环创建 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;

Answer 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]（尽管强烈建议不要这样做，因为它可以带来性能和安全问题）

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

1 个答案: