将数组作为 Observable 返回到 Behavior 主题答案

【问题标题】：Returning array as Observable to Behavior subject将数组作为 Observable 返回到 Behavior 主题
【发布时间】：2019-05-01 03:51:07
【问题描述】：

我在 Angular 6 中应用待办事项过滤器，并根据待办事项是否完成进行路由，只有完成（选中）待办事项应在单击完成链接时显示。我设法获得了在 todoService (getTodos) 函数中完成的待办事项。但是由于 getTodos 是可观察的，它不允许我返回 todos 数组

这是我的服务代码

  public getTodos(query = ''): Observable<Todo[]>{
    if(query === 'completed' || query === 'active'){
      const isCompleted = query === 'completed';
      let todos = this.allTodos.filter(todo => todo.completed === isCompleted);
      console.log(todos);
      // this.storageService.getTodos().subscribe(todos => this.allTodos.filter(todo => todo.completed === isCompleted));
      // return this.todos.next('todos');
      return this.todos.asObservable();
    }else{
      return this.todos.asObservable();
    }
  }

stackblitz中项目的完整链接

Project link

PS：我是 Angular 新手，还在学习 Observables/rxjs

【问题讨论】：

标签： angular typescript rxjs observable angular6

【解决方案1】：

您的服务中已经有一个BehaviorSubject。您只需将公共 Observable 添加到您的服务中：

public todos$: Observable<Todo[]> = this.todos.asObservable();

然后在你的getTodos 方法中：

public getTodos(query = ''): Observable < Todo[] > {
  if (query === 'completed' || query === 'active') {
    ...
    this.todos.next(todos);
  }
  else {
    ...
  }
}

在您的组件中，您可以使用以下方法将todos 由subscribe 获取到此Observable：

todos;
constructor(private todoService: TodoService, ...) {}
...
this.todoService.todos$.subscribe(todos => this.todos = todos);

【讨论】：

感谢您的支持，请您在 stackblitz 中分叉，以便我能很好地理解它。 @SiddAjmera

【解决方案2】：

    Todo[] myTodos;

    todoService.getTodos('').subscribe(response => {
        //here you can response - what you return from service
        this.myTodos=response;
    });

响应是您从服务中返回的东西

【讨论】：