角度过滤器 Observable 数组答案

【问题标题】：Angular filter Observable array角度过滤器 Observable 数组
【发布时间】：2017-09-11 20:17:34
【问题描述】：

我有一个 Observable 数组，我想按名称过滤/查找项目。当我尝试使用过滤器选项时，它在说

项目服务.ts

import { Injectable } from '@angular/core';
import { Project } from "../classes/project";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

import { Http } from '@angular/http';


@Injectable()
export class ProjectService {

  private projects: Observable<Project[]>;

  constructor(private http: Http) {
    this.loadFromServer();
  }

  getProjects(): Observable<Project[]> {
    return this.projects;
  }

  private loadFromServer() {
    this.projects = this.http.get('/api/projects').map(res => res.json());
  }

  getProjectByName(name: String) {
    return this.projects.filter(proj => proj.name === name);
  }


}

项目类

export class Project {
    public name: String;
    public miniDesc: String;
    public description: String;
    public category: String[];
    public images: any[];
}

【问题讨论】：

我认为这篇文章展示了如何做类似的事情，mydaytodo.com/filter-array-observable-angular

标签： angular typescript rxjs

【解决方案1】：

应该是：

getProjectByName(name: String) {
  return this.projects
    .map(projects => projects.filter(proj => proj.name === name));
}

您误解了过滤器运算符。用于过滤从流返回的数据的运算符。您的流返回对象数组，因此您需要 filter array 来获得所需的值。

上面的解决方案会在过滤后返回一个数组，如果你只想得到一个值，使用下面的解决方案

getProjectByName(name: String) {
  return this.projects
    .map(projects => {
      let fl = projects.filter(proj => proj.name === name);
      return (fl.length > 0) ? fl[0] : null;
    });
}

【讨论】：

你也可以在map箭头函数中写一个for循环，返回满足条件的第一个值：.map(xs => { for (let x of xs) if (/*cond*/) return x; return null; })等
@Tiep Phan 提供的非常好的解决方案，只是一个小提示。上面的解决方案适用于原始类型的数组，如果你想过滤对象，你可以这样做：tasks.filter((item) => this.tasks.map((task) => task.id).indexOf(item.id) < 0

【解决方案2】：

在您的服务中，您可以定义<any> 类型或Project[] 类型来返回响应值，同样可以继续使用过滤器。例如<any>res.json() 或 <Project[]>res.json()

并按照@Sajeetharan 的建议更新您的课程

项目服务.ts

import { Injectable } from '@angular/core';
import { Project } from "../classes/project";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

import { Http } from '@angular/http';


@Injectable()
export class ProjectService {

  private projects: Observable<Project[]>;

  constructor(private http: Http) {
    this.loadFromServer();
  }

  getProjects(): Observable<Project[]> {
    return this.projects;
  }

  private  loadFromServer(): Observable<any> {
    this.projects = this.http.get('/api/projects').map((res: Response)=> <any>res.json());
  }

  getProjectByName(name: string) {
    return this.projects.filter(proj => proj.name === name);
  }   
}

*总是在组件中而不是在服务中编写过滤器、条件或操作。

【讨论】：