无法在 Angular 4 中预先填充从服务中获取的数据

Question

我有输入字段，它应该建议与字段中键入的文本匹配的用户名。我正在使用 ngx-bootsrap typeahead 库。

用户名列表必须从后端的 API 调用运行中获取。在每次击键时，它必须调用 API 端点并让我返回匹配的结果。

我试了下面的方法

service.ts

search() : any{

this.req = this.http.get('/timesheet/user').subscribe(
  res => {
    return res;
  },
  (e) => {
    console.log('Error');
  },
  () => {
    this.loading = false;
    console.log('search completed');
  }
);

}

每次击键时，我都会调用函数 loadData()。

asyncSelected: string;
dataSource: Observable<any>;


loadData() {

   this.dataSource = Observable.create((observer: any) => {
      observer.next(this.asyncSelected);
    }).mergeMap((token: string) => {
      this.getStatesAsObservable(token);
    });
}


getStatesAsObservable(token: string): Observable<any> {
   let query = new RegExp(token, 'ig');

   return Observable.of(
     this.searchService.searchOb().filter((state: any) => {
     return query.test(state.name);
    })
  );
}

asyncSelected 是输入框绑定的模型

并且当我尝试将 API 调用的结果保存在变量（服务）class 中时。它运作良好。但我不希望将其保存在变量中，因为列表可能很大并且希望在填充之前过滤结果。

我确保我的服务运行很好。

看看这个： https://valor-software.com/ngx-bootstrap/#/typeahead#async-data

Answer 1

您应该在您的组件中而不是在服务中订阅您的 http 请求。您的服务代码应如下所示：

search() : Observable<any> {
   return this.http.get('/timesheet/user');
}

现在在您的模板中使用异步管道获取数据。如果您想合并数据，请使用 mergeMap 运算符。

使用 typehead 文档中复制的代码更新代码

 <input [(ngModel)]="asyncSelected"
         [typeahead]="data$ | async"
         (typeaheadLoading)="changeTypeaheadLoading($event)"
         (typeaheadNoResults)="changeTypeaheadNoResults($event)"
         (typeaheadOnSelect)="typeaheadOnSelect($event)"
         [typeaheadOptionsLimit]="7"
         typeaheadOptionField="name"
         placeholder="Locations loaded with timeout"
         class="form-control">

在组件中声明一个属性名称为 data$ 的 Observable 类型，并将你的 observable 分配给这个 data$。希望对你有帮助

无法在 Angular 4 中预先填充从服务中获取的数据

Not able to populate data get from service in typeahead in Angular 4

bootstrap-typeahead

angular