ngx-bootstrap typeahead 更改检测问题

Question

真的很奇怪的问题：我们让 ngx-bootstrap typeahead 工作了很长时间，最近我们遇到了这样的行为，即在您单击鼠标之前不显示下拉选项（可以在页面上的任何位置）

typeahead 绑定到一个 API (HttpClient)，并且 typeahead 加载事件显示它已完成，但在您单击某处之前不会显示任何结果。

    <input [(ngModel)]="asyncSelected"
           [typeaheadAsync]="true"
           [typeahead]="departureAirports"
           (typeaheadLoading)="changeTypeaheadLoading($event)"
           (typeaheadOnSelect)="typeaheadOnSelect($event)"
           [typeaheadOptionsLimit]="7"
           typeaheadOptionField="name"
           [typeaheadMinLength]="3"
           placeholder="Locations loaded with timeout"
           class="form-control">
    <div *ngIf="typeaheadLoading">Loading</div>

this.departureAirports = this.getAirports('departure');

public getAirports(direction: string): Observable<Airport[]> {

 const url = 'xxxxxx';
 return this.httpClient.get(url).pipe(take(1), map((response: AirportsResponse) => response.Options ))
}

如果我用一个包裹在可观察（使用 of）中的数组替换 httpClient ，则没有问题。

我们在 rxjs 6.5.3 中使用 angular 8.2.14

Answer 1

老实说，除了一个错误之外，我没有发现任何错误。我要展示它，但我觉得很奇怪，如果你用 rxjs of([ some array ]) 替换 httpClient 会发现......

我认为应该改变的一件事是你在html模板中传递可观察量的方式，虽然它是一个返回值（数组）的可观察量，而不是本身的数组，但它应该在传递时考虑到异步管道，例如

           [typeahead]="departureAirports | async"

这将导致可观察量被解析并将其结果传递给输入。希望这能有所帮助。