datagrid - 具有未知数据集的动态清晰度 DataGrid

Question

我正在处理可变数据集，在从 API 服务获取数据之前，我几乎无法预先确定数据列。我已经找到了一种"@clr/angular": "4.0.8"动态呈现清晰度数据网格（）的方法，如下所示：

private fetchSiloData(uuid: string) {
    const sub = this.siloService.getSiloData(uuid).subscribe({
      next: resp => {
        this.siloData = resp;
         
        // extract columns from the data and mark the first 5 columns as visible for datagrid columns
        if (resp.length) {
          this.columns = Object.keys(resp[0]).map((key, index) => {
            if (index < 5) {
              return { name: key, hidden: false };
            }
            return { name: key, hidden: true };
          });
        }
      },

      complete: () => {
        if (sub) {
          sub.unsubscribe();
        }
      },
    });
  }

在我的组件 html 中，我有以下内容：

<clr-datagrid>
  <clr-dg-column *ngFor="let col of columns" [clrDgField]="col.name">
    <ng-container *clrDgHideableColumn="{ hidden: col.hidden }">
      {{ col.name }}
    </ng-container>
  </clr-dg-column>

  <clr-dg-row *clrDgItems="let row of siloData" [clrDgItem]="row">
    <clr-dg-cell *ngFor="let col of columns">{{ row[col.name] }}</clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>
    {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
    {{ pagination.totalItems }} rows
    <clr-dg-pagination #pagination [clrDgPageSize]="20"></clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>

综上所述，我的期望是：

1. 获得一个格式整齐的数据网格，就像我知道我的数据列一样
2. 清晰度数据网格自动隐藏隐藏列对应的数据单元格
3. 选择和取消选择要工作的列。

但是，这是我使用示例数据源的结果：

我什至继续创建一个纯管道来过滤具有隐藏列的数据单元格，其效果是我现在获得了一个更好的初始视图，就单元格计数而言。

<clr-dg-row *clrDgItems="let row of siloData" [clrDgItem]="row">
    <clr-dg-cell *ngFor="let col of columns | visibleColumns">{{
      row[col.name]
    }}</clr-dg-cell>
</clr-dg-row>

如何满足我对动态呈现的数据网格的需求，但仍然能够让数据网格列选择功能按预期工作？或者更确切地说，我该如何扩展数据网格以涵盖我的用例？先感谢您。

标签： datagridvmware-clarity