3

我在排序和具有 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 函数或我的排序函数，以便获得我想要的结果？

4

2 回答 2

6

如果您不介意，我将添加我自己的答案来解释您的代码为什么不起作用，因为您只提供了一个没有解释的工作代码。

trackBy 函数

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

问题

你的 trackBy 函数是这样的：

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

这将返回此类型的值：

90, en-US

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

解决方案

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

最小的代码是：

getUniqueIdentifier(index, item) {
  return index + ', ' + this.languages._previewLanguage + ', ' + this.items.length;
}
于 2018-01-24T09:58:17.243 回答
0

正如用户@tricheriche 提到的，我需要将索引以及 zIndex 属性添加到 trackBy 以让 TrackBy 按预期工作。

trackBy 函数如下所示：

getUniqueIdentifier(index, item) {
    return index + ', ' + item.zIndex + ', ' + this.languages._previewLanguage + ', ' + this.items.length;
}
于 2018-01-24T09:18:08.277 回答