Angular 角度滤波可观测阵列

我有一个可观察的数组，我想按名称筛选/查找项目。当我尝试使用过滤器选项时，它会说

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


}

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

应该是：

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

您误解了筛选器运算符。用于筛选从流返回的数据的运算符。您的流返回对象的数组，因此您需要

过滤器数组

来获取所需的值

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

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

---

在您的服务中，您可以定义

类型或

Project[]

类型以返回响应值，并且可以继续使用过滤器。e、 g.

res.json（）

或

res.json（）

并根据@Sajeetharan的建议更新您的类

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


}

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

从'@angular/core'导入{Injectable}；
从“./classes/Project”导入{Project}；
从“rxjs/Observable”导入{Observable}；
导入“rxjs/add/observable/of”；
从'@angular/Http'导入{Http}；
@可注射（）
导出类项目服务{
私人项目：可观察；
构造函数（专用http:http）{
这是loadFromServer（）；
}
getProjects（）：可观察{
归还此项目；
}
私有loadFromServer（）：可观察{
this.projects=this.http.get（'/api/projects'）.map（（res:Response）=>res.json（））；
}
getProjectByName（名称：字符串）{
返回此.projects.filter（proj=>proj.name==name）；
}   
}

---

*始终在不在服务中的组件中编写过滤器、条件或操作。

您也可以在map arrow函数中编写一个for循环，返回满足条件的第一个值：

.map（xs=>{for（让x/xs）if（/*cond*/）返回x；返回null；}）

等等。@Tiep Phan提供了非常好的解决方案，只有一张小纸条。上面的解决方案适用于带有基元类型的数组，如果你想过滤对象，你可以这样做：

tasks.filter（（item）=>this.tasks.map（（task）=>task.id）.indexOf（item.id）<0

我想这篇文章展示了如何做类似的事情，