Angular 4 NgFor完成活動

Question

*ngFor完成時，我想調用自定義函數。 （我將jQuery數據表用於表。當tr元素完成時，我想運行此函數$('#myTable').dataTables(options);

我的代碼：

<tbody>
<tr *ngFor="let company of companies; let last = last;">
    <td>{{company.shortTitle}}</td>
    <td>{{company.shortAddress}}</td>
    <td>{{company.taxOffice}}</td>
    <td>{{company.taxNumber}}</td>
    <td *ngIf="company.eInvoice"><span class="label label-primary">Evet</span></td>
    <td *ngIf="!company.eInvoice"><span class="label label-danger">Hayır</span></td>
    <td>
        <button class="btn btn-primary btn-xs"> <i class="fa fa-edit"></i></button>
        <button class="btn btn-danger btn-xs"> <i class="fa fa-trash"></i></button>
    </td>
</tr>

Answer 1

ngAfterViewInit請使用ngAfterViewInit生命周期掛鈎。 由於*ngFor是同步的，它將在companies變更時更新DOM，並且添加的DOM節點將在ngAfterViewInit生命周期掛鈎中可用。

Answer 2

您可以使用ngAfterViewInit來實現

初始化視圖后，將執行ngAfterViewInit內部的代碼

您的代碼看起來像

export class className{
 .....
   ngAfterViewInit(){
      //code
   }
 .....
}

Answer 3

您幾乎永遠不要將Angular和jQuery混合使用。 如果您正在這樣做，則可能會遇到問題或丑陋的代碼變通辦法。

Angular處理DOM以使一切正常工作，數據表（jQuery版本）插件也是如此，因此發生一些沖突是時間問題。

我建議您使用ngx-datatables ，但是我很確定您可以找到很多類似的組件。 還有一些針對Angular 4的數據表包裝器 。

Answer 4

我已經通過https://l-lin.github.io/angular-datatables/#/getting-started解決了這個問題。 謝謝你的鏈接@codtext