如何在 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" 绑定，默认情况下将轻松选择该大小。

我推荐的另一个选项是定义所有列，然后动态隐藏不需要的列。这意味着数据网格完全知道该表，并且计算应该更好。

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

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