Question

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

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

这就是我做的 -

<base href="/">

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

我尝试使用<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>代替render来渲染按钮。但这并不奏效。

修改

我试图从DOM中获取defaultContent个元素，以便将它们绑定到事件中，但我似乎无法获取它们：

在组件中 -

edit-country-btn

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

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静态编译，运行时添加的HTML不由Angular处理。

您可以使用

asp-action="SomeStupidName"

（将按钮添加到DOM后）

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

2 个答案: