I am currently facing an issue with displaying data from my BehaviorSubject. I have come across a way to iterate through a BehaviorSubject using asyncpipe which subscribes to the Observable
SERVICE
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 ))
)
}
}
Component where I want to use it
export class TodoListComponent implements OnInit {
constructor( public $todo: TodoService ) {
$todo.getAllTodos().subscribe()
}
ngOnInit() {
}
}
Template Layer
<div *ngFor="let todo of $todo.todos$ | async">
{{ todo.text }}
</div>
---------------------------------------------------------- EDIT ------------------------------------------------------------------ I´m getting this Error
ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
Is there any possibility to iterate through the data stream of the BehaviorSubject
---------------------------------------------------------- SOLUTION --------------------------------------------------------- My backend sent an Object of Arrays instead of just Arrays. That was the issue, so now I have changed the response to Arrays