角度2 - ルート

Question

を切り替えた後、適切に初期化しませselectpickerとのDataTableだからここにあなたが最初にそれをロードしたとき、私のページは次のようになります。切り替えた後

、それはこのようになります。

これは、この不気味壊れた部分のコードです：

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); 
    }); 
} 

誰でも考えがあれば、気をつけてください。あなたが世話をする必要があるいくつかのポイントがあります

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

：

更新 はNgZoneを試してみました。 angular2にdocument.ready使用

まず侮辱angular2です。それを除く。 angular2でjQueryのプラグインを使用する方法を知って

そして第二に、あなたは最初のHTTPサービスからデータを取得し、ページにバインドするメンバ変数に割り当てる必要があります。そして、すべてのデータバインディングが完了し、データがページ上にレンダリングされていることを保証するonStableイベントを購読する必要があります。

onStableイベントが1回のみ起動されます。

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が実行されたとき は通知し、我々はVMのターンを放棄しようとしている意味もうマイクロタスクは、存在しません。このイベントは一度だけ呼び出されます。

Answer 2

ではなくpublic ngAfterViewChecked(): void {}を使用して、それを解決しました。