角度过滤器Observable数组

Mad*_*han 26 rxjs typescript angular

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

在此输入图像描述

ProjectService.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);
  }


}
Run Code Online (Sandbox Code Playgroud)

项目类

export class Project {
    public name: String;
    public miniDesc: String;
    public description: String;
    public category: String[];
    public images: any[];
}
Run Code Online (Sandbox Code Playgroud)

Tie*_*han 43

它应该是:

getProjectByName(name: String) {
  return this.projects
    .map(projects => projects.filter(proj => proj.name === name));
}
Run Code Online (Sandbox Code Playgroud)

你误解了过滤器操作符.运算符用于过滤从流中返回的数据.您的流返回对象数组,因此您需要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;
    });
}
Run Code Online (Sandbox Code Playgroud)

  • 您还可以在映射箭头函数内编写一个 for 循环,该循环返回满足条件的第一个值: `.map(xs =&gt; { for (let x of xs) if (/*cond*/) return x;返回 null; })` 等 (2认同)