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

我有一个角度为2的应用程序，我已经设法在我的页面上设置一个输入，其自动完成功能可以调用api并确保服务器端过滤和返回值。很像这里找到的教程。Angular 2加载数据一次，并在本地过滤Observable

现在，我正在尝试给我的页面多输入一些内容，但是我不需要在服务器端对它们进行过滤。那将是无效的。更好的是只要我的组件加载，然后过滤组件中的所有值。这导致我不缺问题。我有一个API调用，返回我需要的3个字符串数组。我正在使用的标准方法，像这样来自一个角服务：

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[]; 
}

这工作得很好，我也得到我的观察到后部。我被卡住的地方是如何现在过滤这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)

我可以过滤通过正则表达式就好了一个数组，但得到在观察到实际的数组是我似乎无法做到。

来源

2017-04-05 wakers01

您可以使用Let。看看这篇文章本周出来！ https://netbasal.com/take-advantage-of-the-let-operator-in-angular-d351fd4bd1d9 – Dan

订阅你的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))) 
}

来源

2017-04-05 19:00:15 adharris

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

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


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

    this.formfilterData.push(data); 
    })

来源

2017-04-05 18:49:03 Aravind

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

回答

相关问题