ag-grid-angular 不显示数据

Question

获取并分配给数组的数据未显示在 ag-grid-angular 组件中：

Angular分量：

columnDefs = [
    { headerName: 'Id', field: 'id' },
    { headerName: 'Name', field: 'name' },
    { headerName: 'Login', field: 'login' },
    { headerName: 'Email', field: 'email' },
    { headerName: 'Role', field: 'role' },
    { headerName: 'Department', field: 'department' },
  ];

  rowData = Array();

  ngOnInit(): void {
    this.apiService.getAllUsers().subscribe(users => {
      users.forEach(user => {
        const item = {
          'id': user.id,
          'name': user.name,
          'login': user.login,
          'email': user.email,
          'role': user.role,
          'department': user.department
        };
        this.rowData.push(item)
      }, err => {
        this.errorMessage = err;
      })
    });

    console.log(this.rowData);
  }

Html:

<ag-grid-angular
  [columnDefs]="columnDefs"
  [rowData]="rowData"
  class = "ag-theme-balham standard-grid">
</ag-grid-angular>

网格：

控制台打印的数组数据：

除此之外，没有其他错误

Answer 1

发生这种情况是因为您将项目推送到 rowData 变量，这不会触发更改检测，因此您不会在网格中获得结果。

您可以做的是拥有另一个单独的数组并将项目推送到该数组，然后将该数组分配给 rowData 变量。或者您可以使用 ag 网格 api 方法 setRowData 来设置结果。

ag-grid-angular 不显示数据

ag-grid-angular doesn't display data

angular

ag-grid-angular