Угловая очень странная ошибка на пользовательском элементе

Question

Я сделал пользовательский элемент выбора, и у меня возникла странная ошибка.

Здесь я воспроизвел ошибку: https://stackblitz.com/edit/angular-ff7i5j

Компонент с новым адресом - это компонент, который производитэта ошибкаЯ могу выбрать элемент из компонента select только один раз, после этого кажется, что функция OptionSelectedEvent из select.ts больше не вызывается.

Я действительно не знаю, почему первый пример работает очень хорошо, ив компоненте нового адреса он не работает.

Я надеюсь, что кто-нибудь может помочь мне с этой странной проблемой.

Answer 1

Здесь происходит то, что использование геттеров в шаблонах Angular может привести ко многим проблемам, которые мы не ожидали.

Я говорю об этих геттерах в вашем коде:

public get Judete(): any[] {
  return [{auto: "AB", nume: "Alba"}, {auto: "AR", nume: "Arad"}...];
}

Угловая проверка привязок шаблона и выполнение всех методов получения в каждом цикле обнаружения изменений.Этот шаблон получает новый экземпляр массива Judete с новыми экземплярами каждого элемента при каждой проверке.

Теперь давайте посмотрим, где вы используете этот массив.

*ngFor="let item of Judete"

Угловой встроенный * 1012Директива * использует специальный алгоритм для поиска изменений в вашем массиве с помощью IterableDiffers.Это различие обнаруживает, что ваш массив является абсолютно новым массивом в каждом цикле обнаружения изменений, что приводит к элементам рендеринга.Это означает, что новые элементы SelectOptionComponent создаются при каждом запуске обнаружения изменений, и вы теряете подписки для вашего ContentChildren

Таким образом, решение должно быть простым: просто определитеваши массивы один раз вместо использования геттеров:

Judete =  [{auto: "AB", nume: "Alba"}, {auto: "AR", nume: "Arad"}, ...];

Forked Stackblitz