Angular2-如何动态呈现带有单击事件的按钮

Question

我在Angular2中有一个Web应用程序，正在其中使用SmartAdmin模板。 我的模板之一有一个数据表。

对于表中的每个记录，我想要一个“编辑”按钮。

这就是我的做法-

<sa-datatable #countryTable [options]="{
        ajax: 'assets/api/tables/datatables.filters.json',
        columns: [ {data: 'name'}, 
                   {data: 'position'}, 
                   {data: 'office'}, 
                   {data: 'age'}, 
                   {data: 'date'}, 
                   {data: 'salary'}, 
                   {defaultContent: '<button class=\'btn btn-default btn-xs edit-country-btn\' (click)=\'editClicked()\'>Edit</button>' } ] }"
       tableClass="table table-condenced table-striped table-bordered">
    .
    .
    .
</sa-datatable>

问题在于按钮已呈现，但事件未绑定到该按钮。 （HTML照原样呈现，没有Angular2指令）。

我尝试使用render而不是defaultContent渲染按钮。 但这还不行。

编辑

我试图从DOM中获取edit-country-btn元素，以便将它们绑定到事件，但是我似乎无法获取它们：

在组件中-

@ViewChild('countryTable') public countryTable: any;

ngAfterViewInit() {
    var b = this.countryTable.el.nativeElement.querySelectorAll('button');
    console.log(b);
}

结果是按钮列表，而不是我想要的编辑按钮。

Answer 1

您可以将click事件绑定到将为按钮元素激活的主体（或者，如果您想使其更加具体，则可以使用id，class等），

document.querySelector('body').addEventListener('click', (event)=> {
      if (event.target.tagName.toLowerCase() === 'button') {
         this.editClicked();
      }
    });

相似的例子： https : //stackoverflow.com/a/42579935/5706293

Answer 2

Angular静态编译，Angular不处理在运行时添加的HTML。

您可以使用

querySelector('button').addEventListener('click', editClicked.bind(this))

（将按钮添加到DOM后）