Элементы переупорядочивания Angular DOM в QueryList

У меня есть 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>

angular angular-material viewchild viewchildren
person Soraya Siahpolo    schedule 02.05.2020    source источник
comment
Скажем, у меня есть ‹temp #mytemplate *ngFor=let n of nums›, это генерирует ‹temp user1›‹temp user2›‹temp user3›. В моем компоненте я сортирую QueryList, и теперь я хочу, чтобы представление делало то же самое и показывало ‹temp user2›‹temp user3›‹temp user1›   -  person Soraya Siahpolo    schedule 02.05.2020
comment
Можете показать HTML. О, я только что увидел, что вы добавили его в комментарий - было бы гораздо лучше добавить его к вашему вопросу.   -  person Kurt Hamilton    schedule 02.05.2020
comment
Почему бы вам не отсортировать вместо этого nums?   -  person David    schedule 02.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

Как правило, что-то не так, если мы чувствуем необходимость напрямую изменить DOM. В Angular мы строим наш HTML из нашей модели. Так что в этом случае вы должны просто изменить порядок вашей модели.

nums = [ 1, 2, 3 ];

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

Это, очевидно, очень абстрактный ответ на ваш очень абстрактный вопрос.

person Kurt Hamilton    schedule 02.05.2020