当我单击时，变量中的按钮不起作用。角打字稿答案

【问题标题】：Button in variable didn't work when i clicked. Angular Typescript当我单击时，变量中的按钮不起作用。角打字稿
【发布时间】：2022-01-28 22:43:31
【问题描述】：

当我使用这个功能时：

@Pipe({name: "safeHtml"})
export class Save implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  transform(value: any) {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}
//-----------------------------------------------------------

FindTheResult(Group: string, Name: string) {

this.GetData().then(() => {
  this.ListOfName.forEach(name => {
    let Link = "Results/" + Group + "/" + name + "/" + Name
    this.FirebaseData.database.ref(Link).get().then(res => {
      if (res.val() == null) {

        this.tagName = `<h1>` + name + '</h1><h1>не приступал</h1>' + `<button (click)="Back()">dasds</button>` + this.tagName

      } else {
        this.tagName = this.tagName + `<h1>` + name + '</h1><h1>' + String(res.val()) + '%</h1>'
      }
    })
  })
})}
Back() {
this.IsTest = !this.IsTest}

我使用此功能从 Firebase 收集所有数据。然后我把所有这些东西都放到变量'tagName'和一个按钮上。但是当我点击时按钮不起作用。如果我在（点击）中写 this.Back()，P.s 不起作用

HTML：

<main>
      <div class="lable">
        <h1>My homework</h1>
        <div class="massive">
          <div style="pointer-events:none" [innerHTML]="tagName  | safeHtml"></div>
        </div>
      </div>
    </main>

什么都没有发生。似乎只是没有看到这个功能

【问题讨论】：

标签： html angular typescript variables

【解决方案1】：

IMO bypassSecurityTrustHtml() + [innerHTML] 绑定只能在无法避免的情况下在 Angular 中使用。不支持(click)="Back()"等事件处理。

我会定义一个数组并使用它来包含值。然后使用*ngFor 和*ngIf 指令在模板中渲染。

public tags = [];

FindTheResult(Group: string, Name: string) {
  this.GetData().then(() => {
    this.ListOfName.forEach(name => {
      let Link = "Results/" + Group + "/" + name + "/" + Name
      this.FirebaseData.database.ref(Link).get().then(res => {
        this.tags.push({
          name: name, 
          value: res.val()
        });
      })
    })
  })
}

Back() {
  this.IsTest = !this.IsTest
}

<main>
  <div class="lable">
    <h1>My homework</h1>
    <div class="massive">
      <div style="pointer-events:none">
        <ng-container *ngFor="let tag of tags">
          <h1>tag.name</h1>
          <h1 *ngIf="tag.value; else noBack">
            {{ tag.value }}
          </h1>
          <ng-container #noBack>
            <h1>не приступал</h1>
            <button (click)="Back()">dasds</button>
          </ng-container>
        </ng-container>
      </div>
    </div>
  </div>
</main>

旁注：如果包装 <div> 有 "pointer-events:none"，我不确定你会如何点击按钮。

【讨论】：

太棒了，谢谢。呜呜呜