如何在Clarity Datagrid中禁用列自动宽度功能？

Question

我需要在Angular中动态构建Clarity Datagrid的列。这是我的方法：

我有一个数组columnsDef，其中保存了我需要显示的字段的定义，如下所示：

columnsDef = [
{id:'id', label:'ID'},
{id:'client', label:'Client/Prospect'},
...
]

和另一个变量backlog，它保存要在网格中显示的实际数据。

然后，在我的html模板中，我具有以下代码来定义列标题和单元格：

<clr-datagrid>
  <clr-dg-column *ngFor="let def of columnsDef" [clrDgField]="def.id">
     {{ def.label }}
  </clr-dg-column>

  <clr-dg-row *clrDgItems="let request of backlog" [clrDgItem]="request">
      <clr-dg-cell *ngFor="let def of columnsDef">
          {{ request[def.id] }}
      </clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

这实际上是“有效的”，但列对齐都弄乱了。这些值不在其标题下方，并且单元格宽度逐行不同。

（对不起，我必须对一些机密数据进行像素化）

我该如何解决？

Answer 1

动态列由于生命周期的性质而无法获得计算的宽度，无法及时呈现内容以了解其大小，因此它们将获得默认宽度。如果将[style.width.px]="100"绑定放在每列上，则默认情况下将轻松选择该大小。

我建议的另一种选择是定义所有列，然后动态隐藏不想要的列。这意味着该表是Datagrid完全已知的，因此计算结果应该更好。

    <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: isColumnHidden}">
            Column Name
        </ng-container>
    </clr-dg-column>

在某些情况下，这可能没有意义（因为有时列根本不可用）。在这些情况下，我通常建议仅为每种情况定义一个不同的Datagrid，而不是尝试始终使用动态构建的数据网格。它使Datagrid的含义更加明确和声明，并且将更清晰地呈现。