ngx-bootstrap提前更改检测问题

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

如果我将httpClient替换为可观察的（使用）包装的数组，则没有问题。

我们在rxjs 6.5.3中使用angular 8.2.14

Answer 1

与你相处，除了一个我没有发现任何错误。我要显示它，但让我感到奇怪的是，如果您用（[some array]）的rxjs替换httpClient将可以找到...

我认为应该改变的一件事是您在html模板中传递observable的方式，尽管它是返回value（array）而不是数组本身的observable，但应注意异步管道喜欢

           [typeahead]="departureAirports | async"

这将使可观察对象解析并获得将其结果传递到输入的结果。希望能对您有所帮助。