如何在每个代码中使用 Angular 中的（单击）功能添加元素？答案

【问题标题】：How can I add elements with an (click) function in Angular per code?如何在每个代码中使用 Angular 中的（单击）功能添加元素？
【发布时间】：2020-02-27 21:27:15
【问题描述】：

我正在寻找一种在 Angular 每个 Typescript 代码中添加元素的方法。问题是，这些元素应该具有（点击）功能，而我不知道应该添加多少这些元素（例如，具有任何范围的 for 循环应该创建任意数量的元素）。

textausgabe.innerHTML += '<div (click)="caller()"'>click</div>';

这正确地创建了元素，但如果我点击它，什么都不会发生。

你知道解决我问题的方法吗，请告诉我如何:)

【问题讨论】：

标签： angular typescript function onclick innerhtml

【解决方案1】：

您不应该在 Angular 中执行此操作。在您的 ts 文件中添加一个数组并使用 *ngFor 在模板中循环该数组。然后，在您的 (click) 处理程序中，您可以将一个元素附加到该数组。 *ngFor 将负责为您创建该元素。

template.html

<div *ngFor="let element of elements" (click)="caller()">click</div>
<button (click)="appendElement()">Append Element</button>

component.ts

@Component({...})
export class MyComponent {
   public elements:Array<unknown> = [];

   public appendElement():void {
      this.elements = [...this.elements, this.elements.length + 1]; // Just append anything, since you are not using the values otherwise, appending a generic ID here
   }

   public caller():void {
      // Do whatever you want when your appended elements are clicked
   }
}

这里是一个有效的StackBlitz。

【讨论】：