反应式表单上的提前输入 - 不显示提前输入

Question

因为关于 typeahead with reactive forms 的文档非常'limited' 我不知道这是一个错误还是问题出在 pc 前面。^^ 问题：每次我的表单更改时，我都想进行异步 http 调用。到目前为止，这种情况发生了，每次我的表单更新时我都会得到一个新结果（这就是我想要的）。但是数组的预输入没有出现。

<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);
});

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)">

虽然我现在解决了，但如果有人能告诉我就太好了为什么这真的有效^^

反应式表单上的提前输入 - 不显示提前输入

Typeahead on reactive Forms - typeahead doesnt show up

observable

rxjs

ngx-bootstrap

angular

angular-reactive-forms