我有一个 TypeScript 类,我在其中调用了一个调用后端 API 的方法,以从服务器获取数据并将其放入网格中。目前我有硬编码的列和行只是为了测试我将如何做到这一点。当我按照下面的示例放置列和行设置代码时,我得到了正确填充的网格。
export class FooComponent {
private columnDefs = [];
private rowData = [];
private gridOptions: GridOptions;
private data: any;
constructor(private http:HttpClient ) {
this.getFoo();
this.gridOptions = <GridOptions>{};
this.gridOptions.columnDefs = [
{headerName: 'Make', field: 'make' },
{headerName: 'Model', field: 'model' },
{headerName: 'Price', field: 'price'}
];
this.gridOptions.rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
}
getFoo(){
this.http.get(`https://xxx`).subscribe(response => {
this.data = response;
}, error => {
console.log(error);
});
}
但是当我将列和行设置代码放在 getFoo 方法中时,这是我想要的地方,我的网格数据没有设置,我得到一个加载框。
export class FooComponent {
private columnDefs = [];
private rowData = [];
private gridOptions: GridOptions;
private data: any;
constructor(private http:HttpClient ) {
this.getFoo();
}
getFoo(){
this.http.get(`https://xxx`).subscribe(response => {
this.data = response;
this.gridOptions = <GridOptions>{};
this.gridOptions.columnDefs = [
{headerName: 'Make', field: 'make' },
{headerName: 'Model', field: 'model' },
{headerName: 'Price', field: 'price'}
];
this.gridOptions.rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
}, error => {
console.log(error);
});
}
我试图通过从 getFoo 返回一个 promise ,然后在 promise 的“then”内设置列和行数据来解决这个问题,但得到了相同的加载框。
这是我的标记。
<ag-grid-angular
style="width: 700px; height: 500px;"
class="ag-theme-balham"
[gridOptions]="gridOptions"
>
</ag-grid-angular>
有什么想法吗?
最佳答案
你可以这样做:
export class FooComponent {
private columnDefs = [];
private rowData = [];
private gridOptions$: Observable<GridOptions>;
constructor(private http:HttpClient ) {
}
ngOnInit() { this.getFoo(); } // call it here, not in constructor
getFoo(){
this.gridOptions$ = this.http.get(`https://xxx`);
}
您可以通过对它执行 .map 来转换 http 请求并执行您的业务逻辑,并且该响应将是可见的。
之后就在 html 中这样调用它:
<ag-grid-angular
style="width: 700px; height: 500px;"
class="ag-theme-balham"
[gridOptions]="gridOptions$ | async"
>
这将为您异步更新模型并触发更改检测。
关于javascript - Ag-Grid 动态设置列和行数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58540014/