Ag-Grid 动态设置列和行数据

Question

我有一个 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>

有什么想法吗？

Answer 1

你可以这样做：

  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"
>

这将为您异步更新模型并触发更改检测。