Typeahead на реактивных формах - typeahead не отображается

Question

Поскольку документация по типу головы с реактивными формами очень «ограничена», я не могу сказать, является ли это ошибкой или проблема возникает перед компьютером. ^^ Проблема: я хочу делать асинхронный http-вызов каждый раз, когда моя форма изменяется,Пока это происходит, и я каждый раз получаю новый результат, когда моя форма обновляется (это то, что я хочу).НО typehahead с массивом не появляется.

<input type="text"
               class="form-control"
               required minlength="3"
               name="name"
               placeholder="Search for people..."
               formControlName="name"
               [(ngModel)]="name"
               typeaheadOptionField="name"
               [typeaheadOptionsInScrollableView]="2"
               [typeahead]="dataSource | async"
               [typeaheadOptionsLimit]="100"
               [typeaheadScrollable]="true"
               [typeaheadAsync]="true"
               (typeaheadLoading)="changeTypeaheadLoading($event)">

И компонент:

   this.dataSource = this.form.valueChanges.pipe(
      debounceTime(500),
      switchMap((form) => {
        return this.service.getstats(form).map((result:someTypedArr[]) => {
           return result;
        });
      })
    );
  }

Примечание: у меня есть асинхронный канал в привязке Observable - это означает - я подписываюськ нему в HTML-шаблон.

Answer 1

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

public clanEmitter: EventEmitter<ClansByClantagType[]> = new EventEmitter<ClansByClantagType[]>();

и отправил результат подписки:

this.form.valueChanges.pipe(
  debounceTime(500),
  switchMap((form) => {
    return this.service.getstats(form).map((result:someTypedArr[]) => {
       return result;
    });
  })
).subscribe(result => {
  this.clanEmitter.emit(result);
});

* 1006.* EventEmitter был включен в html примерно так:

<input type="text"
           class="form-control"
           required minlength="3"
           name="name"
           placeholder="Search for people..."
           formControlName="name"
           [(ngModel)]="name"
           typeaheadOptionField="name"
           [typeahead]="clanEmitter"
           [typeaheadScrollable]="true"
           [typeaheadAsync]="true"
           (typeaheadLoading)="changeTypeaheadLoading($event)">

Хотя я решил это сейчас, было бы здорово, если бы кто-то мог сказать мне ПОЧЕМУ это действительно сработало ^^