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

Если у кого-то есть идеи, не стесняйтесь указать на это.

Update Пробовал 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

Есть несколько моментов, которые нужно заботиться.

Сначала использование документа. Уже в угловом2 является оскорбительным угловым2. Убери это.

и, во-вторых, чтобы знать Как использовать плагин jQuery в угловом2, вам нужно сначала получить данные из службы 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 {}.