在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;
}