时间戳

首页 > 解决方案 > 遍历 BehaviorSubject 模板层的值

angular - 遍历 BehaviorSubject 模板层的值

问题描述

我在显示我的 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 的数据流

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

标签： angulartypescriptrxjsobservablebehaviorsubject

解决方案

在役：

@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>

推荐阅读