angular - Angular 2 - 切换路线后选择选择器和数据表未正确初始化

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 何时运行并且没有更多微任务，这意味着我们即将放弃 VM 轮次。这个事件只被调用一次。

Answer 2

通过使用解决了它public ngAfterViewChecked(): void {}。