Angular DOM 對 QueryList 中的元素重新排序

Question

我有一個對象的 QueryList。 我需要根據用戶交互重新排序 DOM 元素：

    @ViewChildren('mytemplate') temp: QueryList<MyObjects>;

In ngAfterViewInit :

    let arr = this.temp.toArray();

    // sort the arr here (it gets sorted correctly)

    this.temp.reset(arr) // sorts the temp but DOM elements stays in the same order

QueryList 已排序，但我認為的順序保持不變。 我還需要重新排序視圖。 知道如何根據 QueryList 對視圖進行動態排序嗎？

假設我有

<temp #mytemplate *ngFor="let n of nums"> 

這會產生

<temp user1>
<temp user2>
<temp user3>

在我的組件中，我對 QueryList 進行排序，現在我希望視圖執行相同的操作並顯示

<temp user2>
<temp user3>
<temp user1>

Answer 1

如果我們覺得需要直接修改 DOM，那通常是有問題的。 在 Angular 中，我們從 model 構建 HTML。 因此，在這種情況下，您只需重新訂購 model。

nums = [ 1, 2, 3 ];

sort() {
  this.nums = [ 2, 3, 1 ];
}

這顯然是對您高度抽象的問題的高度抽象的答案。