Angular 2加载一次数据并在本地过滤Observable

Question

我有一个 angular 2 应用程序，我已经成功地在我的页面上设置了一个带有自动完成的输入，该自动完成调用 api 并切断了端过滤和返回值.很像这里找到的教程。

现在，我正在尝试向我的页面添加更多输入，但我不需要在服务器端过滤这些输入。那将是低效的。最好在我的组件加载时获取所有值，然后在组件中进行过滤。这给我带来了很多问题。我有一个 api 调用，我需要 returns 3 个字符串数组。我使用如下标准方法从 Angular 服务获取这些信息：

getFormFilters(): Observable<FormFilterModel> {
    return this._http.get(this.baseUrl+this.getFormFiltersPath)
      .map(res => res.json() as FormFilterModel);
  }

型号：

export interface FormFilterModel {
    array1: string[];
    array2: string[];
    array3: string[];
}

这很好用，我的 Observable 回来了。我被卡住的地方是我现在如何在本地过滤这 3 个数组？我将我的输入连接到我的表单控件，就像我对服务器端过滤输入所做的那样。我不知道如何访问我的 Observable 中的实际数组来过滤它们。这是我使用该代码的位置：

this.filteredArray1$ = this.searchForm.controls.array1Search.valueChanges
      .debounceTime(300)
      .distinctUntilChanged()
      .switchMap(term => //some filtering here of formFilterModel$ to return a subset of array1 based on input)

我可以很好地通过 RegExp 过滤数组，但在可观察对象中获取实际数组是我似乎做不到的事情。

Answer 1

首先你必须订阅响应，然后过滤接收到的对象。

 formfilterData :FormfilterModel;
 filteredArray1:stringp[]=[];
 this.serviceOb.getFormFilters().subscribe((formfilterData)=>{
    this.formfilterData=formfilterData;


  });
   this.formfilterData.array1.filter((data)=>{

    this.formfilterData.push(data);
    })

Answer 2

订阅您的 api 调用并将结果存储在组件中。然后，过滤valuesChanges.map.

中的数组

ngOnInit() {
  this.getFormFilters().subscribe(formFilters => {
    this.formFilters = formFilters;
  });

  this.filteredArray1$ =  this.searchForm.controls.array1Search.valueChanges
    .debounceTime(300)
    .distinctUntilChanged()
    .map(search => this.formFilters.array1.filter(value => matches(value, search)))
}

Angular 2加载一次数据并在本地过滤Observable

Angular 2 load data once and filter Observable locally

javascript

rxjs

typescript

angular2-observables

angular