Angular2 - 如何呈現動態點擊事件的按鈕

我在Angular2中有一個Web應用程序，其中我使用了SmartAdmin模板。我的一個模板有一個數據表。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>

的問題是，該按鈕呈現，但該事件不會綁定到它。（HTML呈現原樣，沒有Angular2指令）。

我試着渲染按鈕使用render而不是defaultContent。但是這並不如此。

編輯

我試圖讓從DOM元素edit-country-btn，以便將它們綁定到事件，但我似乎無法獲取它們：

在組件 -

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

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

結果是按鈕列表，但不是我想要的編輯按鈕。

來源

2017-03-09 mridula

可以綁定一個click事件，這將用於按鈕元素被激活身體（或者，如果你想讓它更具體一些，你可以使用ID，類等），

document.querySelector('body').addEventListener('click', (event)=> { 
     if (event.target.tagName.toLowerCase() === 'button') { 
     this.editClicked(); 
     } 
    });

類似的例子：https://stackoverflow.com/a/42579935/5706293

來源

2017-03-09 07:44:43 echonax

Angular靜態編譯，在運行時添加的HTML不會被Angular處理。

您可以使用

querySelector('button').addEventListener('click', editClicked.bind(this))

（按鈕添加到DOM後）

來源

2017-03-09 07:21:41

我其實確實嘗試了這一點，但似乎無法獲得編輯按鈕列表。看我的編輯。 'ngAfterViewInit（）'是否適合這個？ – mridula

也許它還沒有添加。嘗試'setTimeout（（）=> ...，100）'。 –

這工作。但是我如何設置超時以保證它的安全？現在，它不能工作在100，而是工作在1000. – mridula

Angular2 - 如何呈現動態點擊事件的按鈕

回答

相關問題