Angular 2 - selectpicker和datatables在切換路由後沒有正確初始化

Question

因此，這是我的頁面在第一次加載時的樣子。

切換後，它看起來像這樣。

這是代碼爲這個古怪的斷裂部分：

ngOnInit(): void 
{ 
    $(document).ready(function() { 
     (<any>$("#the_table")).DataTable(); 
     (<any>$('#selectpicker')).selectpicker(); 
    } 
    if ($.isEmptyObject(this.route.snapshot.params) === false) 
    { 
     this.id = +(<any>this.route.snapshot.params).id; 
    } 
    let pass = {type: "reports"}; 
    this.searchService.searchHttp({type: "reports"}).then((response: any) => 
     { 
      this.reports = response; 
      console.log(response); 
     }); 
} 

這裏未破的「搜索」的代碼。

ngOnInit(): void 
{ 
    $(document).ready(function() { 
      (<any>$('.selectpicker')).selectpicker(); 
    }); 

    this.tags = this.searchService.get_tags(); 
    this.draw_table(); 
} 

draw_table() 
{ 
    let json = JSON.stringify(this.tags); 
    this.table = (<any>$("#ajax_table")).DataTable({ 
     "dom": 'Bfrtip', 
     "processing": true, 
     "ajax": { 
      "url": "app/php/search.php" + "?json=" + encodeURIComponent(json) + "&type=search", 
     }, 
     "columns": [ 
      { "data": "id" }, 
      { "data": "ref" }, 
      { "data": "date" }, 
      { "data": "title" }, 
      { "data": "site" }, 
      { "data": "location" } 
     ], 
     "filter": true, 
     "select": true, 
     "autoWidth": false, 
     "buttons": [ 
      { 
       "text": "test", 
       action:() => 
       { 
        console.log(table.rows({ selected: true }).data()); 
        let data = table.rows({ selected: true }).data()[0]; 
        data = (data) ? data : null; 
        this.router.navigate(['/main', data ]); 
       }, 
       enabled: false 
      } 
     ], 
     //"destroy": true 
    }); 

    let table = this.table; 

    table.on('select', function() { 
     table.button(0).enable(true); 
    }); 
    table.on('deselect', function() { 
     table.button(0).enable(false); 
    }); 
} 

如果任何人有任何想法，請隨時指出來。

更新 嘗試NgZone：

ngOnInit(): void 
{ 
    if ($.isEmptyObject(this.route.snapshot.params) === false) 
    { 
     this.id = +(<any>this.route.snapshot.params).id; 
    } 
    let pass = {type: "reports"}; 
    this.searchService.searchHttp({type: "reports"}).then((response: any) => 
     { 
      this.reports = response; 
      console.log(response); 
      this.ngZone.onStable.first().subscribe(() => { 
       (<any>$('#selectpicker')).selectpicker(); 
       (<any>$("#the_table")).DataTable(); 
      }); 
     }); 
} 

Answer 1

有需要照顧的幾個要點。

首先在angular2中使用document.ready會導致angular2被侮辱。去掉它。

其次要知道如何在angular2中使用jQuery插件，您需要首先從http服務中獲取數據並將其分配給成員變量以將其綁定到頁面上。然後你應該訂閱onStable事件，確保所有的數據綁定已經完成並且數據已經在頁面上呈現。

onStable事件只會被觸發一次。

constructor(private ngZone: NgZone) {} 

    ngOnInit() { 
     this.searchService.searchHttp({type: "reports"}).then((response: any) => 
       { 
        this.reports = response; 
        // waiting until select options are rendered 
        this.ngZone.onStable.first().subscribe(() => { 
         $('#selectpicker')).selectpicker(); 
        }); 
       }); 
      } 
    } 

onStable：EventEmitter： 最後onMicrotaskEmpty已經用完的時候通知並沒有更多microtasks，這意味着我們要放棄VM轉彎。這個事件只被調用一次。

Answer 2

改爲使用public ngAfterViewChecked(): void {}來解決。