Angular 被动表单上的Typeahead-Typeahead不显示

由于带有被动表单的typeahead上的文档非常“有限”，我无法判断这是一个bug还是问题出现在电脑前面^^ 问题: 我想在每次更改表单时进行异步http调用。到目前为止，这种情况发生了，每当我的表单更新时，我都会得到一个新的结果（这就是我想要的）。但是带有数组的typeahead没有出现

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

---

注意：我在可观察绑定中有异步管道-这意味着-我在html模板中订阅了它。

经过一些尝试和错误后，我想出了如何在typeAhead中显示结果，我创建了一个EventEmitter属性：

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

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

---

虽然我现在已经解决了，但是如果有人能告诉我为什么这个方法真的有效，那就太好了。^^

你有没有试着缩小问题的范围？是数据的异步加载还是“被动方式”按照标题中的说明声明表单？当我在结果返回之前键入

console.log

时，每次我都会得到表单上发生更改时显示的预期数组-因此我猜typeahead可能需要另一种订阅方式-我希望这里的一些typeahead专家^^^看不出您的可观测数据有多大错误定义可能创建一个plnkr/JSFIDLE来鼓励人们摆弄这个问题。正如Fan Cheung已经指出的，代码看起来还可以，其余的都是猜测。1分钟前找到了解决方案，lol^^^根据状态，

[typeahead]

属性可以是“可观察的”。通过使用，您立即订阅了该可观察数据，并将

getstats（form）

的返回值作为typehahead数据源传递

getstats（）

可能为

form===“”

返回了一个空数组。由于没有数据，因此未显示typeahead弹出窗口。

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

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