Угловой фильтр Наблюдаемый массив

У меня есть массив 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[];
}

Ответ 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;
    });
}

Ответ 2

В Angular 7 вам не нужна карта для фильтрации значения по подписанному значению

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

Ответ 3

В вашей службе вы можете определить тип <any> type или 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);
  }   
}

* всегда записывайте свои фильтры, условия или манипуляции в компоненте, не входящем в сервисы.