带有Bootstrap表的Angular2

Question

I am playing with Angular2 and bootstrap-table ( http://bootstrap-table.wenzhixin.net.cn/ ). In bootstrap table, there is formatter function which is responsible to render cell with custom content. I would like to put a button in that column but I can't bind click event to that button

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 doesn't process HTML added dynamically in any way, therefore (click) won't be bound in your case.

What you can do is

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(...)
}