ngx-bootstrap typeahead更改检测问题

Question

非常奇怪的问题:我们让ngx-bootstrap typeahead工作了很长一段时间，最近我们遇到了下拉选项直到你点击鼠标才会显示的行为(可以在页面的任何地方)

typeahead绑定到一个接口(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 ))
}

如果我将httpClient替换为包装在可观察对象中的数组(使用)，则不会出现任何问题。

我们使用的是angular 8.2.14和rxjs 6.5.3

Answer 1

老实跟你说，除了一个错误，我没有发现任何错误。我将展示它，但我觉得奇怪的是，如果你用(一些数组)的rxjs替换httpClient就能找到...

我认为应该更改的一件事是在html模板中传递observable的方式，虽然这是一个返回值(数组)而不是数组本身的observable，但在传递时应该考虑到异步管道

           [typeahead]="departureAirports | async"

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