Question

我正在使用Angular 2构建应用。我有一个服务，我尝试过滤数据，然后再从服务中获取数据。我想要一个函数，我只能询问一个项目元素而不是整个数组。

这是我尝试的代码，但这种方法不起作用：

getProject(id: number): Observable<Project> {
        return this.http.get(this.url).map(this.extractData).filter(project => (<Project>project).id == id).catch(this.handleError2);

    // return this.getProjects().filter(project => project.id === id);
    //return this.http.get(this.url).toPromise().then(x => x.json().data.filter(project => project.id === id)[0]).catch(this.handleError);
}

private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
}

private handleError2 (error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
    error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
}

Answer 1

最好从您调用服务的位置过滤组件中的数据。

所以你的服务就像：

getProject(id: number): Observable<Project> {
  return this.http.get(this.url).map(this.extractData);
}
private extractData(res: Response) {
  let body = res.json();
  return body.data || []; // return value must be array to use filter function in component
}

您可以在组件中

执行以下操作：

service.getProject(projectId).subscribe((res) => {
  let filtered = [];
  if(res.length){
    filtered = res.filter((item) => {
      return item.id === projectId;
    });
  }
});

Answer 2

对我来说，看起来你正在混合同步和异步代码，并且返回并不是那样的。您可以返回后来属性更改的对象（函数）（也称为Promise）

我怀疑http.get()是否提供了一个数组供您映射

.toPromise()似乎是一个黑客，但你应该返回一个Promise链

return this.http.get(this.url).then(data => data.map(this.extractData).filter(project => (<Project>project).id == id).catch(this.handleError2));

如果this.http.get()没有返回Promise但是接受回调，你可以构建一个：

return new Promise (resolve => this.http.get(this.url, resolve)).then(data => data.map(this.extractData).filter(project => (<Project>project).id == id).catch(this.handleError2));

任何调用getProject()的内容都可以与getProject().then()

链接

Answer 3

如果这部分代码有效：

getProjects() {
        return this.http.get(this.url).map(this.extractData).catch(this.handleError2);
     }

然后你可以用：

调用一个项目

getProject(id: number) {
        return this.getProjects()
            .then(projects => projects.filter(project => (<Project>project).id == id);
    }

Angular2在服务中应用过滤器

3 个答案: