Автозаполнение материала фильтром не работает с асинхронными данными

Question

Я подготовил это Stackblitz ситуация в моем реальном приложении очень похожа.

Данные поступают позже, чем <app-async-complete> отображается / устанавливается.

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

Какие-нибудь быстрые советы?

Что важно

Когда я нажимаю на работающий «пример» и на «случай синхронизации», я получаю предложения уже о первоначальном фокусе. Однако это не относится к «асинхронному случаю». Я хочу того же поведения.

Answer 1

Вам нужно заменить свой код, как показано ниже -

 options: string[] = [];
 @Input('options') set onOptions(options: string[]){
    this.options = options;
    this.initAutoComplete()
  }
  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.initAutoComplete();
  }

  initAutoComplete(){
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

Answer 2

Работает, но завис из-за ошибки, которую вы получаете.

Вам нужно будет просто охранять ноль:

private _filter(value: string): string[] {
  const filterValue = value.toLowerCase();

  // Here this.options can be null, so you get error when you .filter on null
  return this.options ? this.options.filter(option => option.toLowerCase().includes(filterValue)) : this.options;
  }