Angular 从 Objservable 对象数组返回 observable 对象：

Question

我想从一个或多个 Observable 数组中返回一个 Observable 对象。 getTodoById() 我尝试使用管道和地图运算符返回。 错误消息：

输入'Observable' 不能输入 'Observable'。输入“待办事项 | undefined 不可分配给类型“Todo”。 ts(2322)

我尝试分配“？”签名，但它不是很有用。也许我做错了。 这是我当前的代码。 我试过 Observable 作为 getById() 的返回类型，它显示了相同的错误。

待办事项：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, of, Subscription, pipe } from 'rxjs';
import { map } from 'rxjs/operators';
import { FilterBy } from '../models/filterBy.model';
import { SortBy } from '../models/sortBy.model';
import { Todo } from '../models/todo.model';

// this is BehaviorSubject - Can get .next
  private _todos$ = new BehaviorSubject<Todo[]>([])

  // this is an Observable - we CANNOT do .next.
  // It acts like a getter - You can list to it's changes
  // this makes a good separation!
  public todos$ = this._todos$.asObservable();

      public getById(id: string): Observable<Todo> {
    return this.todos$.pipe(map(todos=> todos.find(todo => todo._id === id)))
  }

待办事项模型：

export interface Todo {
  _id: string,
  title:string,
  date:Date,
  isDone:boolean,
  importance:number
}

Answer 1

您是否尝试过添加过滤器操作符

return this.todos$.pipe(
  map(todos=> todos.find(todo => todo._id === id)),
  filter(todo => !!todo)
)

Answer 2

您需要将 undefined 作为返回类型添加到 getById，因为您使用的是 find() 并且 typescript 足够聪明，知道您的数组不会总是返回值。

  public getById(id: string): Observable<Todo | undefined> {
    return this.todos$.pipe(map(todos=> todos.find(todo => todo._id === id)))
  }

或者，如果您不想将 undefined 作为返回值返回，您可以按如下方式使用强制转换：

  public getById(id: string): Observable<Todo> {
    return this.todos$.pipe(map(todos=> todos.find(todo => todo._id === id))) as Observable<Todo>
  }

但我更喜欢第一种解决方案

Answer 3

感谢您的回答并尽力提供帮助。我决定采用一种更简单的方法：

  public getById(id: string): Todo | undefined{
    const todos = this._todos$.getValue();
    return todos.find(todo => todo._id === id);
  }