Angular12.1使用打字稿添加html元素

我正在通过 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></div>
<button (click)="createEl()">click me</button>

错误

回答

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

实现这一点的更好方法是定义模板中重复元素的外观并从数组中驱动它。这样我们就可以让模板做显示,打字稿做处理,Angular 处理两者之间的一切。

HTML

<div>
  <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

  • 什么需要更多时间、执行时间或代码编写?无论哪种方式,这是以角度构建模板更新的合适方法

以上是Angular12.1使用打字稿添加html元素的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>