Угловой фильтр RxJS Observable по массиву объектов

Question

Я новичок в Angular и Observable.Я хочу применить фильтр к массиву объектов.Вот так выглядит мой код.,

getReport () получает все отчеты.

 getReports(): Observable<IReport[]>  {
    console.log("in get Reports Service Call");
    return this._http.get<IReport[]>(this.URL)
      .pipe(
        tap(data => console.log('All Data Retrieved - ' + JSON.stringify(data))),
        catchError(this.handleError));
  }

Я пытаюсь написать другой метод, который может фильтровать по имени отчета и выдавать мне массив IReport.Это то, что у меня есть сейчас.

 getReportDetails(name : string) : Observable<IReport[]>
  {
    return this.getReports().pipe(
      map((reports : IReport[]) => reports.find(p => p.reportName === name))
    );
  }

Я получаю ошибку как

Type 'Observable<IReport>' is not assignable to type 'Observable<IReport[]>'.

Вот интерфейс IReport с 5 свойствами.

export interface IReport {
    date: Date;
    reportName: string;
    reportLink: string;
    reportStatus: string;
    region: string;
  }

Что я делаю не так?Спасибо всем.

Answer 1

Просто попробуйте изменить find на filter, найдите - получить только один объект, а фильтр - получить массив объектов

getReportDetails(name : string) : Observable<IReport[]>
  {
    return this.getReports().pipe(
      map((reports : IReport[]) => reports.filter(p => p.reportName === name))
    );
  }

Answer 2

Еще лучшим решением для фильтрации возвращаемых данных будет оператор фильтра rxjs

https://www.learnrxjs.io/operators/filtering/filter.html И тогда вы можете просто легко передать его на вашу более старую наблюдаемую и вернуть наблюдаемую отфильтрованные данные, на которые вы можете подписаться

Answer 3

Я думаю, что это должно быть

map((reports : IReport[]) => reports.filter(p => p.reportName === name))

вместо

map((reports : IReport[]) => reports.find(p => p.reportName === name))

find вернет первое IReport, соответствующее условию p.reportName === name