首页 文章

用angular2可观察到的ag-grid绑定

提问于
浏览
0

我正在尝试在组件加载时将数据加载到ag-grid中 . 结合example on ag-grid githubanswer to this question我有我的组件的ngOnInit:

ngOnInit(): void {
    this.promisesService.getPromises()
        .subscribe((s: Promise[]) => {
            console.log('got response:', s);

            this.gridOptions = {
                enableSorting: true,
                rowData: this.createRowData(),
                columnDefs: this.createColumnDefs(),
                onGridReady: () => {
                    this.gridOptions.api.sizeColumnsToFit();
                    console.log('ag-grid ready');
                }
            };

            console.log('options set:', this.gridOptions);
        });
}

网格卡在“正在加载...”上,没有错误消息 . gridOptions设置正确,其rowData包含我期望看到的所有数据 . 但是从不触发onGridReady .

如果我在subscribe之外移动选项的设置,它可以正常工作:

ngOnInit(): void {
    this.promisesService.getPromises()
        .subscribe((s: Promise[]) => {
            console.log('got response:', s);

            console.log('options set:', this.gridOptions);
        });

    this.gridOptions = {
        enableSorting: true,
        rowData: this.createRowData(),
        columnDefs: this.createColumnDefs(),
        onGridReady: () => {
            this.gridOptions.api.sizeColumnsToFit();
            console.log('ag-grid ready');
        }
    };


}

在模板中我只设置选项:

<ag-grid-ng2 #agGrid style="width: 100%; height: 200px;" class="ag-fresh" [gridOptions]="gridOptions"></ag-grid-ng2>

我已经尝试将代码移动到构造函数中并在模板中设置rowData但它没有帮助 .

我错过了什么?

谢谢

1 回答

  • 0

    出于某种原因,如果我在构造函数中设置选项并在Init中保留数据,它可以正常工作 . 有人知道原因,请告诉我:

    export class PromisesListComponent {
    private gridOptions: GridOptions;
    promises: Promise[];
    
    constructor(private promisesService: PromisesService) {
        this.gridOptions = {
            rowData: this.promises,
            columnDefs: this.createColumnDefs(),
            enableColResize: true,
            enableSorting: true,
            enableFilter: true,
            onGridReady: () => {
                this.gridOptions.api.sizeColumnsToFit();
            }
        }
    }
    
    ngOnInit(): void {
        this.promisesService.getPromises()
            .subscribe((response: Promise[]) => {
                this.promises = response;
            });
    }
    
    private createColumnDefs() {
        return [
            {
                headerName: "Agreement Code",
                field: "AgreementCode",
                width: 200
            }
        ];
    }
    

    }

相关问题