角度過濾器可觀察數組

Question

我有一個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); 
    } 


} 

工程類

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

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

Answer 2

在你的服務，你可以定義<any>型或Project[]類型返回響應值和同可以繼續使用過濾器。例如<any>res.json()或<Project[]>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(): 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); 
    } 
} 

*總是寫你的過濾器，條件或操縱部件不在服務。