角度过滤器 Observable 数组

Posted 2023-03-13

【中文标题】角度过滤器 Observable 数组

【英文标题】：Angular filter Observable array

【发布时间】：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

【参考方案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);
     

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