網站搜尋

typescript - Angular 過濾 Observable 陣列


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

答案#1

它應該是:

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