数据网格选择随机丢失

Question

我正在使用单选的 VMWare Clarity 数据网格。

在后台，我正在接收更新的数据，并且随机地，所选行不再被选中。

我发现那些链接似乎有同样的问题，看起来它已在 0.12.2 中修复，但我从侧面看不到：

https://github.com/vmware/clarity/issues/484

https://github.com/vmware/clarity/issues/2342

这是我的代码

html

<clr-datagrid [clDgRowSelection]="true" [(clrDgSingleSelected)]="selectedUnit">
   ...

   <clr-dg-row *clrDgItems="let unit of units" [clrDgItem]="unit" (click)="backupSelectedUnit(unit)">
      ...
   </clr-dg-row>
</clr-datagrid>

JS

myfunc() {

    this.units = this.getUpdatedUnits();
}

提前致谢

Answer 1

您在 *clrDgItems 上缺少 trackBy。每当您处理从服务器接收到的对象时，您确实希望确保您正在使用 trackBy 来帮助 Angular（以及 Clarity）知道如何比较您的对象。否则，唯一的比较 Angular 可以执行的是引用相等性，当您不断从服务器获取更新的对象时，它不会被保留。这里是 the official documentation for it, and you can find a maybe more readable explanation in the template syntax docs.

*clrDgItems 支持与 *ngFor 相同的 trackBy 选项，因此您可以只写：

<clr-dg-row *clrDgItems="let unit of units; trackBy: trackById" ...>

其中 trackById 是您添加到组件中的函数，如下所示：

trackById = (index, unit) => unit.id

我在这里假设您从服务器接收到的对象有一个 ID，但您可以根据您的具体用例使用任何其他方式来识别它们。

数据网格选择随机丢失

Datagrid selection get lost ramdomly

angularjs

vmware-clarity