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"

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

ngx-bootstrap提前输入更改检测问题

1 个答案: