javascript - Angular 12.1 使用 typescript 添加 html 元素

Question

我正在通过 youtube 学习 Angular，但我正在尝试做一些新的事情，但我遇到了一个错误，我的代码附在下面，请帮帮我。
我想这样设置属性 div.setAttribute('(click)',"popUp($event)");但我得到了错误。
typescript

export class AppComponent {
    createEl(){
      console.time("timer");
      for (let i = 0; i < 10; i++) {
        let div = document.createElement("div");
        div.textContent = `Hello, World! ${i}`;
        div.setAttribute('(click)',"popUp($event)");
        document.getElementById('divEl')?.appendChild(div);
      };
      console.timeEnd("timer");
}

HTML

<div id="divEl"></div>
<button (click)="createEl()">click me</button>

错误

Answer 1

这不是真正的 Angular 做事方式。尽量避免对文档进行操作，如document.createElement .
实现这一点的更好方法是定义模板中重复元素的外观并从数组中驱动它。这样我们就可以保持模板进行显示， typescript 进行处理，而 Angular 处理这两者之间的所有事情。
HTML

<div id="divEl">
  <div *ngFor="let row of rows; index as i;" (click)="popUp($event)">
    Hello, World! {{i}}
  </div>
</div>

<button (click)="createEl()">click me</button>

typescript

export class AppComponent {
  rows: unknown[] = [];
  createEl():void {
    this.rows.push('something');
  }

  popUp(event:Event):void {}
}  

更多关于循环的阅读: https://angular.io/api/common/NgForOf