Как я могу повторно запустить этот ngFor для этого множественного выбора при вводе поискового запроса?

Question

Я создал stackblitz, который воспроизводит мою текущую проблему: https://stackblitz.com/edit/angular-ivy-jewewq

У меня есть своего рода множественный выбор с двумя разными состояниями (назначенный, неназначенный) и панель фильтра вверху: снимок экрана компонента

Если я нажму X ​​рядом с назначенными именами, он переместит этого пользователя в раздел «Неназначенные». И наоборот, если я нажимаю на неназначенный, он перемещает пользователя в назначенный раздел.

Проблема, с которой я сталкиваюсь, заключается в том, что я использую ввод поиска / фильтра. Если я помещаю туда «Рикардо», который назначен по умолчанию, он правильно отображает пользователя, но если я нажимаю «x», чтобы отменить назначение пользователя, он правильно удаляет его из назначения, но тогда он не показать его как «Не назначено». (И наоборот: поиск неназначенного пользователя, щелчок для его назначения удаляет пользователя из неназначенного списка, но не добавляет пользователя в назначенный список).

Я предполагаю, что мне нужно как-то повторно запустить ngFor of " unassigned ", но я не понимаю, почему мой подход работает, когда поискового запроса нет, но не работает, когда он есть.

Answer 1

Чтобы перезапустить ngFor с Pipe, вам необходимо обновить входные данные для Pipe:

*ngFor="let user of unassigned | searchUsers:'fullName':query; 
                        |                       |         |
                       (1)                      (2)      (3)

Под входами обновления я подразумеваю ссылку на обновление этого параметра.

fullName (2) является значением stati c. Итак, чтобы запустить Pipe, вам нужно либо ввести что-нибудь еще (обновить query параметр (3)) или обновить ссылку для свойства searchUsers (1).

Обновление должно произойти неизменно , но вы используете метод Array.prototype.sort(), который изменяет исходный массив (сортирует на месте).

this.unassigned = this.unassigned.sort(this.sortAlphabetically);

Даже если вы переназначаете исходный массив на отсортированный массив, он не обновляет ссылку на исходный массив.

Вместо этого вы можете попробовать выполнить неизменную сортировку:

this.unassigned = [...this.unassigned].sort(this.sortAlphabetically);

Forked Stackblitz