即使ngOnChanges中的相同代码有效,Ag-grid也不会通过ngDoCheck刷新行

时间:2019-06-13 17:25:38

标签: angular ag-grid

当通过ngOnChanges调用gridOptions onGridReady时,Ag-grid成功加载了检索到的记录,但是仅当通过ngDoCheck调用时,才以完全相同的方式加载columnDefs(我可以看到一旦使用KeyValueDiffer / KeyValueChanges检测到更改,该方法就会被调用)。

在第一种情况下,rowData通过输入参数传递,但是在第二种情况下,通过service属性更新,该属性通过使用onKeyChanges的modelDiffer代码成功检测到其更改。调试器转到以下位置的this.gridOptions语句ngDoCheck,但该表未使用数据的行进行更新;仅显示列标题。

ngOnChanges代码(有效):

    ngOnChanges(changes: SimpleChanges) {
        this.gridOptions = {
            onGridReady: (params) => {
                this.gridApi = params.api;
                this.gridOptions.api.setRowData(this.model.records);
                this.gridOptions.api.setColumnDefs(this.columnDefs);
                this.gridOptions.columnApi.sizeColumnsToFit(4000);
                this.gridOptions.api.refreshHeader();
                this.gridOptions.api.refreshCells({ force: true });
                this.gridOptions.defaultColDef = this.defaultColDef;
                this.gridOptions.isExternalFilterPresent = this.isExternalFilterPresent.bind(this);
                this.gridOptions.doesExternalFilterPass = this.doesExternalFilterPass.bind(this)
            },
            rowSelection: 'multiple',
            enableColResize: true,
            enableSorting: true,
            enableFilter: true,
        };
    }

ngDoCheck代码(不起作用):

ngDoCheck() {
    const changes = this.modelDiffer.diff(this.model);
    if (changes) {
        this.gridOptions = {
            onGridReady: (params) => {
                this.gridApi = params.api;
                this.gridOptions.api.setRowData(this.model.records);
                this.gridOptions.api.setColumnDefs(this.columnDefs);
                this.gridOptions.columnApi.sizeColumnsToFit(4000);
                this.gridOptions.api.refreshHeader();
                this.gridOptions.api.refreshCells({ force: true });
                this.gridOptions.defaultColDef = this.defaultColDef;
                this.gridOptions.isExternalFilterPresent = this.isExternalFilterPresent.bind(this);
                this.gridOptions.doesExternalFilterPass = this.doesExternalFilterPass.bind(this)
            },
            rowSelection: 'multiple',
            enableColResize: true,
            enableSorting: true,
            enableFilter: true,
        };
    }
}

0 个答案:

没有答案