Angular 12.1 使用打字稿添加 html 元素

Question

我正在通过 youtube 学习 angular，但我正在尝试做一些新的事情，但我遇到了一个错误，我的代码附在下面，帮帮我。

我想像这样设置属性，div.setAttribute('(click)',"popUp($event)");但出现错误。

打字稿

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

这并不是真正的有角的做事方式。尽量避免对诸如document.createElement.

实现这一点的更好方法是定义模板中重复元素的外观并从数组中驱动它。这样我们就可以让模板做显示，打字稿做处理，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>

打字稿

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

  popUp(event:Event):void {}
}  

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

Answer 2

下面检查一下就对了。

div.addEventListener('click', (e) => {
  this.popUp(e);
});