Невозможно присвоить значения угловой модели автозаполнения

Question

[Решено]

У I есть была проблема с использованием модели данных в форме автозаполнения (Angular 6 / материал). Вот фрагмент моего приложения: Stackblitz paste (только для общего просмотра)

Список рабочих и пицц получен из JSON с использованием соответствующих сервисов, и затем я пытаюсь применить отфильтрованные модели для автозаполнения.

Я установил точку останова в методе getData () [app.component.ts], а переменная watch сообщает, что как рабочие, так и пиццы не определены. Позже this.workers.slice () явно генерирует исключение и предотвращает работу фильтра автозаполнения. Когда я возобновляю отладку, он больше не вызывает этот метод, но данные каким-то образом назначаются, поэтому нижний список под моей формой правильно заполнен данными из REST API.

Я попробовал решение, предоставленное @NDDTConti, и добавило некоторое условие при срабатывании valueChanges, но оно не работает должным образом. Поэтому я провел еще несколько поисков и нашел этот блог: RxJS - if-else

После замены более раннего определения изменений значения оно работает нормально и как положено. Отредактированный фрагмент:

this.filteredWorkers = this.workerCtrl.valueChanges
  .pipe(
    startWith(''),
    map((worker) => {
      let filteredOutput: Worker[];
      if (!this.workers || !this.workers.length) {
        return filteredOutput;
      } 
      else {
        worker ? filteredOutput = this._filterWorkers(worker) : this.workers.slice()
        return filteredOutput;
      }
    })
  );

Answer 1

Причина этого заключается в том, что подписка также выполняется при инициализации, и в это время значение равно нулю.

Простым решением было бы проверить, является ли значение пустым в valueChange.

Я бы использовал что-то вроде этого (этот код не проверен):

 this.filteredPizzas = this.pizzaCtrl.valueChanges(k => {
    if (k.startWith('') && pizzas) k.map(pizza => pizza ? this._filterPizzas(pizza) : this.pizzas.slice())
  });