angular - QueryList 中的 Angular DOM 重新排序元素

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 中，我们从模型构建 HTML。所以在这种情况下，你应该重新排序你的模型。

nums = [ 1, 2, 3 ];

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

这显然是对您高度抽象的问题的高度抽象的答案。