Angular2 with Bootstrap Table

Question

Я играю с Angular2 и загрузочным столом (http://bootstrap-table.wenzhixin.net.cn/). В бутстрап-таблице есть функция форматирования, которая отвечает за рендеринг ячейки с пользовательским контентом. Я хотел бы поставить кнопку в этой колонке, но я не могу BIND нажмите событие этой кнопки

import {Component, OnInit, ElementRef, Renderer} from 'angular2/core'; 

@Component({ 
    selector: 'bs-table', 
    template: `<table class="table"></table>` 
}) 
export class TableComponent implements OnInit { 

    constructor(private _elRef: ElementRef, private _renderer: Renderer) {} 

    edit() { 
     alert(); 
    } 

    ngOnInit() { 
     $(this._elRef.nativeElement.firstChild).bootstrapTable({ 
      columns: [ 
       {title: "ID", field: "id"}, 
       {title: "Name", field: "name"}, 
       {title: "", formatter: (data) => { 
        return '<button class="btn"  (click)="edit()">Edit</button>';      } 
       }, 
      ], 
      data: [ 
       {id: 1, name: "Test 1"} 
      ] 
     }) 
    } 
} 

Screenshot

Answer 1

Angular2 не добавил процесс HTML динамически в любом случае, поэтому (click) не будет быть связанным в вашем случае.

Что вы можете сделать, это

ngOnInit() { 
    $(this._elRef.nativeElement.firstChild).bootstrapTable({ 
     columns: [ 
      {title: "ID", field: "id"}, 
      {title: "Name", field: "name"}, 
      {title: "", formatter: (data) => { 
        return '<button class="btn" (click)="edit()">Edit</button>'; 
       } 
      }, 
     ], 
     data: [ 
      {id: 1, name: "Test 1"} 
     ] 
    }); 
    $('button.btn', this._elRef.nativeElement.firstChild).click(...) 
}