Angular2 - 如何动态呈现具有单击事件的按钮-Java 学习之路

我在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 渲染按钮 . 但这并不奏效 .

EDIT

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

在组件中 -

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

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

结果是按钮列表，但不是我想要的编辑按钮 .

2 回答

3
您可以将单击事件绑定到将为按钮元素激活的正文（或者如果您希望它更具体，则可以使用id，class等），
```
document.querySelector('body').addEventListener('click', (event)=> {
      if (event.target.tagName.toLowerCase() === 'button') {
         this.editClicked();
      }
    });
```
类似的例子：https://stackoverflow.com/a/42579935/5706293
回复于 2024-04-18T15:39:56+08:00
2
Angular静态编译，运行时添加的HTML不由Angular处理 .

您可以使用
```
querySelector('button').addEventListener('click', editClicked.bind(this))
```
（按钮添加到DOM后）
回复于 2024-04-18T15:39:56+08:00

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

2 回答

相关问题