#angular #select
#angular #выберите
Вопрос:
Я создал пользовательский элемент выбора, и у меня возникла странная ошибка.
Здесь я воспроизвел ошибку: https://stackblitz.com/edit/angular-ff7i5j
Компонент нового адреса — это компонент, который вызывает эту ошибку. Я могу выбрать элемент из компонента select только один раз, после этого кажется, что функция OptionSelectedEvent from select.ts больше не вызывается.
Я действительно не знаю, почему первый пример работает очень хорошо, а в компоненте нового адреса он не работает.
Я надеюсь, что кто-нибудь сможет помочь мне с этой странной проблемой.
Ответ №1:
Здесь происходит то, что использование геттеров в шаблонах Angular может привести ко многим проблемам, которых мы не ожидали.
Я говорю об этих геттерах в вашем коде:
public get Judete(): any[] {
return [{auto: "AB", nume: "Alba"}, {auto: "AR", nume: "Arad"}...];
}
Angular проверяет привязки шаблонов и выполняет все методы получения при каждом цикле обнаружения изменений. Этот шаблон получает новый экземпляр Judete массива с новыми экземплярами каждого элемента при каждой проверке.
Теперь давайте посмотрим, где вы используете этот массив.
*ngFor="let item of Judete"
Встроенная ngForOf директива Angular использует специальный алгоритм для поиска изменений в вашем массиве с помощью IterableDiffers . Это различие обнаруживает, что ваш массив является полностью новым массивом при каждом цикле обнаружения изменений, что приводит к повторным элементам. Это означает, что новые элементы SelectOptionComponent создаются при каждом запуске обнаружения изменений, и вы теряете подписки на свои дочерние элементы контента
Поэтому решение должно быть простым: просто определите свои массивы один раз вместо использования геттеров:
Judete = [{auto: "AB", nume: "Alba"}, {auto: "AR", nume: "Arad"}, ...];