首页 文章

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

提问于
浏览 次
1

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

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

使用我的* ngFor上的trackBy函数，当我对数组进行排序时（不好），项目会切换到位置 . 如果我删除trackBy函数，则不会发生这种情况，并且根据z-index对项目进行排序 .

*The ngFor:

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

The trackBy function:

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

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

The sorting function:

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

所以似乎trackBy和这种排序函数由于某种原因而发生冲突 . 现在的结果是，当我使用sort函数时，items数组根据z-index进行排序，但项目也会切换位置，这意味着它们的维度属性由于某种原因而被切换 .

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

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

angular sorting ngfor angularjs-track-by

2 回答

  • 0

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

    trackBy函数

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

    问题

    你的trackBy函数是这样的：

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

    这将返回此类型的值：

    90, en-US

    90 不会改变 unless you push/withdraw items from your array ，而 en-US can be applied to several items of the array . 这意味着如果更改索引或其他字段，则不会发生更改检测 .

    解决方案

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

    最小代码是：

    getUniqueIdentifier(index, item) {
  return index + ', ' + this.languages._previewLanguage + ', ' + this.items.length;
}
    回复于
  • 2

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

    trackBy函数看起来像这样：

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

相关问题