我在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 回答
您可以将单击事件绑定到将为按钮元素激活的正文(或者如果您希望它更具体,则可以使用id,class等),
类似的例子:https://stackoverflow.com/a/42579935/5706293
Angular静态编译,运行时添加的HTML不由Angular处理 .
您可以使用
(按钮添加到DOM后)