angular - 在 Angular 4 中使用 trackBy 对 *ngFor 数组进行排序

Question

我在排序和具有 trackBy 函数的数组时遇到问题。用例如下:

我有一个项目数组。所有这些项目都有一个 z-index 属性。我还有一个图层管理器​​，可以编辑每个项目的 z-index。当我想保存我的项目时，我想根据每个项目的 z-index 属性对我的数组进行排序。我的 ngFor 上也有一个 trackBy 来限制 *ngFor 上的变化检测量。

在我的 *ngFor 上使用 trackBy 函数，当我对数组进行排序时，项目会切换位置(这很糟糕)。如果我删除 trackBy 函数，这不会发生，并且项目会根据 z-index 排序。

*ngFor:

<div class="item" *ngFor="let item of items; let i = index;trackBy:getUniqueIdentifier">

trackBy 函数:

getUniqueIdentifier(index, item) {
    return this.items.length + ', ' + this.languages._previewLanguage;
}

如您所见，当项目的长度发生变化或者我切换语言设置时，*ngFor 也会发生变化。我试过添加 + ', ' + item.zIndex 但这不起作用。

排序函数:

sortItemsArrayByZIndex() {
    this.items.sort((i1, i2) => {
        return (i1.zIndex - i2.zIndex);
    });
}

所以看起来 trackBy 和这个 sort 函数出于某种原因是有冲突的。现在的结果是，当我使用排序函数时，项目数组根据 z-index 排序，但项目也会切换位置，这意味着它们的维度属性由于某种原因被切换。

我想要的是项目数组根据 z-index 排序，但项目保持其尺寸。

我需要如何更改我的 trackBy 函数或我的排序函数才能获得我想要的结果？

Answer 1

如果您不介意，我会添加我自己的答案来解释为什么您的代码无法正常工作，因为您只提供了一个工作代码而没有任何解释。

trackBy 函数

trackBy 函数是为了提高性能，避免不必要的变化检测。您可以提供一个自定义函数，就像您所做的那样，它将创建一个值，该值将被检查以查看是否需要触发更改检测。

问题

您的 trackBy 函数是这样的:

getUniqueIdentifier(index, item) {
  return this.items.length + ', ' + this.languages._previewLanguage;
}

这将返回这种类型的值:

90, en-US

90 不会改变除非你从你的数组中插入/取出项目，而zh-CN 可以是应用于数组的多个项目。这意味着如果您更改索引或其他字段，则不会发生更改检测。

解决方案

既然你想对你的数组进行排序，你必须至少将索引添加到你的自定义函数的返回值中。这意味着如果项目的索引发生变化(并且由于您对数组进行排序，它会发生变化)，就会发生变化检测。

最小代码是:

getUniqueIdentifier(index, item) {
  return index + ', ' + this.languages._previewLanguage + ', ' + this.items.length;
}