（单击）=''事件不起作用，角度为2

Question

我经常探索，但解决方案对我不起作用。 我试图在我的代码中调用一个方法，但它不起作用。没有发生错误，但点击事件也不起作用。 在我的代码中，我动态添加一个按钮，并在我的代码中添加。但是当我点击Approved或UnApproved时，没有任何事情发生。我使用<ng-table>，Approved和UnApproved按钮位于<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

如果您使用 innterHTML 来显示动态HTML，那么......

当您使用 innerHTML 动态添加html时，它会正常运行并在UI前端提供您想要的输出。但是使用相同的方法，如果动态HTML中包含任何 angular context ，例如。 （点击）活动， angular context 将无效，因为 innerHTML 不适用于此。

因此，当动态HTML包含角度上下文时，您必须考虑使用DynamicComponentLoader动态注入组件和动态HTML，您可以使用角度上下文，例如单击事件

DEMO： https://plnkr.co/edit/BcQXNf5AWrDUXFamIGIy?p=preview

Answer 2

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));
  }