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

Question

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

我有一个项目数组。 所有这些项都具有z-index属性。 我还有一个图层管理器，可以编辑每个项目的z-index。 当我想保存我的项目时，我想根据每个项目的z-index属性对我的数组进行排序。 我还有一个跟踪我的ngFor来限制* 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函数时，items数组根据z-index进行排序，但项目也会切换位置，这意味着它们的维度属性由于某种原因而被切换。

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

我如何更改我的trackBy函数或我的排序函数，以便我得到我想要的结果？

Answer 1

如果您不介意，我会添加自己的答案来解释您的代码无效的原因，因为您只提供了一个没有解释的工作代码。

trackBy功能

trackBy功能用于改善性能，并避免不必要的变化检测。 您可以像提供的那样提供自定义功能，它将创建一个值，以便检查是否需要触发更改检测。

你的trackBy函数是这样的：

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

这将返回此类型的值：

90, en-US

除非您从阵列中推送/撤销项目 ，并且en-US 可以应用于阵列的多个项目， 否则 90将不会更改。 这意味着如果更改索引或其他字段，则不会发生更改检测。

由于您要对数组进行排序，因此必须至少将索引添加到自定义函数的返回值中。 这意味着如果项目的索引发生更改（并且由于您对数组进行排序，它将会发生），将发生更改检测。

最小代码是：

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

Answer 2

用户@trichetriche提到我需要将索引和zIndex属性添加到trackBy以让TrackBy按预期工作。

trackBy函数看起来像这样：

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