Ajax 如何通过http请求获取数据，以便在Angular中进行自动搜索？

嗨，我正在用JS5开发web应用程序。我正在尝试完成自动搜索功能。我能够使它与静态值一起工作。现在我正试图从API调用中获取数据。下面是我的代码

import { Component } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { TypeaheadMatch } from 'ngx-bootstrap/typeahead';


    @Component({
      selector: 'demo-typeahead-async',
      templateUrl: './async.html'
    })
    export class DemoTypeaheadAsyncComponent {
      asyncSelected: string;
      typeaheadLoading: boolean;
      typeaheadNoResults: boolean;
      dataSource: Observable<any>;
      statesComplex: any[] = [
        { id: 1, name: 'Alabama', region: 'South' },
        { id: 2, name: 'Alaska', region: 'West' },
        {
          id: 3,
          name: 'Arizona',
          region: 'West'
        },
        { id: 4, name: 'Arkansas', region: 'South' },
        { id: 5, name: 'California', region: 'West' },
        { id: 6, name: 'Colorado', region: 'West' }
    ];

      constructor() {
        this.dataSource = Observable.create((observer: any) => {
          // Runs on every search
          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.statesComplex.filter((state: any) => {
            return query.test(state.name);
          })
        );
      }

      changeTypeaheadLoading(e: boolean): void {
        this.typeaheadLoading = e;
      }

      changeTypeaheadNoResults(e: boolean): void {
        this.typeaheadNoResults = e;
      }

      typeaheadOnSelect(e: TypeaheadMatch): void {
        console.log('Selected value: ', e.value);
      }
    }

我试了如下。下面的代码不适用于我

 getStatesAsObservable(token: string): Observable<any> {
        let query = new RegExp(token, '');
        return Observable.of(
            this.useronboardService.searchUsers(token).subscribe(
                 result => result.filter((user: any) => {
                   return query.test(user.userName),
                        error => console.log(error)
                }))
    );

getStatesAsObservable（标记：字符串）：可观察{
let query=new RegExp（标记“”）；
可观测收益(
this.useronboardService.searchUsers（令牌）.subscribe(
result=>result.filter（（用户：any）=>{
返回query.test（user.userName），
error=>console.log（错误）
}))
);

---

我想使用上面的服务数据，而不是这个.statesComplex。我的服务返回包含属性id和用户名的数组。有人能帮我完成这项工作吗？谢谢。

this.useronboardService.searchUsers（token）

已经是一个可观察的，所以你不需要将它包装在（…）的

可观察的中

。只需将结果映射到过滤后的值即可

getStatesAsObservable(token: string): Observable<any> {
    let query = new RegExp(token, '');
    return this.useronboardService.searchUsers(token)
        .map(result => result.filter((user: any) => query.test(user.userName)));
}

getStatesAsObservable（标记：字符串）：可观察{
let query=new RegExp（标记“”）；
返回此.useronboardService.searchUsers（令牌）
.map（result=>result.filter（（user:any）=>query.test（user.userName））；
}

您可以订阅formControl的valueChanges Observable，添加一些debounceTime，这样它就不会进行大量后端调用。并且在订阅中的debounceTime之后进行后端调用。谢谢pavan。您可以与我共享一些链接来完成此操作。谢谢您。您也可以使用

Observ简化您的构造函数Abable.of（this.asyncSelected）

而不是

Observable.create（…）

。您好，David。我在上述代码中发现了一个错误。如果在输入字符串进行搜索时存在两个匹配记录，则在ui中我们将只得到一个结果。

 getStatesAsObservable(token: string): Observable<any> {
        let query = new RegExp(token, '');
        return Observable.of(
            this.useronboardService.searchUsers(token).subscribe(
                 result => result.filter((user: any) => {
                   return query.test(user.userName),
                        error => console.log(error)
                }))
    );

getStatesAsObservable(token: string): Observable<any> {
    let query = new RegExp(token, '');
    return this.useronboardService.searchUsers(token)
        .map(result => result.filter((user: any) => query.test(user.userName)));
}