遍历 BehaviorSubject 模板层的值答案

【问题标题】：Iterate through values of a BehaviorSubject template Layer遍历 BehaviorSubject 模板层的值
【发布时间】：2019-01-19 08:15:59
【问题描述】：

我在显示我的 BehaviorSubject 数据时遇到问题。我已经看到了这种带有订阅 Observable 的异步管道的 BehaviorSubject 迭代

服务

todo.service.ts

@Injectable()
export class TodoService {

todos$: BehaviorSubject<Todo[]> = new BehaviorSubject<Todo[]>( [] ) ;

readonly todoEndPoint = environment.endpoint + "todos"

constructor( private $http: HttpClient) {}

getAllTodos(): Observable<Todo[]>{
return this.$http.get<Todo[]>( this.todoEndPoint )
    .pipe(
      tap( val => this.todos$.next( val ))
    )
}
}

我希望它使用的组件

export class TodoListComponent implements OnInit {

constructor( public $todo: TodoService ) {
  $todo.getAllTodos().subscribe()
}

ngOnInit() {
}

}

模板层

<div *ngFor="let todo of $todo.todos$ | async">
  {{ todo.text }}
</div>

----------------------------------- - - - - - - 编辑 - - - - - - - - - - - - - - - - - - - ---------------------------- 我收到此错误

ERROR 错误：尝试比较“[object Object]”时出错。只允许使用数组和可迭代对象

是否有可能遍历 BehaviorSubject 的数据流

----------------------------------- - - - - - - 解决方案 - - - - - - - - - - - - - - - - - - - ------------------ 我的后端发送了一个数组不是数组的对象。那是问题现在改变了对数组的响应

【问题讨论】：

我有问题：什么有问题吗？要精确。您预计会发生什么，以及会发生什么？
添加了错误消息。我想在模板层订阅我的 BehvairoSubject 并遍历数据流。
查看浏览器开发工具的网络选项卡，并将从请求中获得的响应粘贴到 todoEndpoint。我敢打赌，它不是您声称的 Todo 数组，而是一个对象。
你是对的，它是一个包含数组的对象。现在更改了后端，所以它响应数组而不是包含数组的对象，谢谢！

标签： angular typescript rxjs observable behaviorsubject

【解决方案1】：

在役：

@Injectable()
export class TodoService {

readonly todoEndPoint = environment.endpoint + "todos"

constructor( private $http: HttpClient) {}

getAllTodos(): Observable<Todo[]>{
return this.$http.get<Todo[]>( this.todoEndPoint );
}
}

在组件中：

export class TodoListComponent implements OnInit {

public todoitems$: Observable<Todo[]>;

constructor( private $todo: TodoService ) {
}

ngOnInit() {
     this.todoitems$ = this.$todo.getAllTodos();
}

}

在模板中：

<div *ngFor="let todo of todoitems$ | async">
  {{ todo.text }}
</div>

【讨论】：

这对我不起作用，它给了我同样的错误。我也想使用 BehaviorSubject
确保您的 HTTP 返回数组 ob 对象。 NgFor 仅适用于数组和可迭代。如果您的 HTTP 返回对象。您需要在调用异步之前将对象转换为数组。在 Angular 6.1 中，NgFor 支持 KeyValue 管道。

【解决方案2】：

TS：

服务：

getAllTodos(): Observable<Todo[]>{
return this.$http.get<Todo[]>( this.todoEndPoint );
}

组件：

export class TodoListComponent implements OnInit {

//todos as observable.
public todos: Observable<Todo[]>;

constructor( private $todo: TodoService ) {
}

ngOnInit() {
     this.todos = this.$todo.getAllTodos();
}

}

HTML：

<div *ngFor="let todo of todos | async">
  {{ todo.text }}
</div>

【讨论】：

这对我不起作用，它给了我同样的错误。我也想使用 BehaviorSubject