（click）=''事件不起作用，在角度2

Question

我进行了很多探索，但是解决方案对我而言不起作用。我试图在我的代码中调用一个方法，但是它不起作用。没有发生错误，但click事件也无法正常工作。在我的代码中，我正在动态添加一个按钮，并且它已添加到我的代码中。但是，当我单击时Approved ，UnApproved则什么都没有发生。我正在使用<ng-table>，Approved并且UnApprovedbutton在<ng-table>指令中。请建议我我做错了什么？

我的代码是：

     editData() {
    this.data.forEach(function (row) {
          if (row.isApproved) {
        row.editButton = "<button (click)='approveUnApproveLeave()'>UnApproved</button>";
      } else {
        row.editButton = "<button (click)='approveUnApproveLeave()'>Approved</button>";
        row.isApproved = row.isApproved.toString();
      }
    })
  }

  approveUnApproveLeave() {
    console.log("approveUnApproveLeave called");
  }

} // class closed

请查看快照以更好地了解。

Answer 1

Angular 在编译组件时处理组件模板（在浏览器加载应用程序之前使用 AoT）。之后添加的 HTML 不会被 Angular 处理。(click)="..."按原样添加，然后被 Angular 忽略。

你能做的就是强制注册一个事件处理程序

  constructor(private elRef:ElementRef, private cdRef:ChangeDetectorRef);

  editData() {
    this.data.forEach((row) => { // don't use function if you want to use `this`
          if (row.isApproved) {
        row.editButton = "<button>UnApproved</button>";
      } else {
        row.editButton = "<button>Approved</button>";
        row.isApproved = row.isApproved.toString();
      }
    });
    this.cdRef.detectChanges(); // to ensure the DOM is updated
    // add event handlers imperatively
    this.elRef.nativeElement.querySelectorAll(button).forEach(b => b.addEventListener('click', this.eventHandler.bind(this));
  }