How to display one Observable of an Observable-Array in Angular?

Question

I have an Observable-Array which contains a list of questions. I would like to display my questions one by one but can't figure out a way to do that.

So far I only managed to display all of them with a *ngFor in my html.

This is my component:

 import { Component, OnInit } from '@angular/core'; import { mergeMap, Observable, of, concatAll, Subject, startWith, zip, Subscription } from "rxjs"; import { Question } from "../models/Question"; import { QuestionService } from "../services/question.service"; import { AuthService } from "../services/auth.service"; import { User } from "../models/User"; @Component({ selector: 'app-play', templateUrl: './play.component.html', styleUrls: ['./play.component.css'] }) export class PlayComponent implements OnInit { user_id: Pick<User, "id"> | undefined unanswered_questions$: Observable<Question[]> | undefined question$: Observable<Question> | undefined constructor( private questionService: QuestionService, private authService: AuthService ) { } ngOnInit(): void { this.user_id = this.authService.userId this.unanswered_questions$ = this.getUnansweredQuestions(this.user_id) } getUnansweredQuestions(user_id: Pick<User, "id"> | undefined): Observable<Question[]> { return this.questionService.fetchAllUnansweredQuestions(user_id); } }

This is my html:

 <mat-card class="question-card" *ngFor="let question of unanswered_questions$ | async"> <mat-card-header> <div mat-card-avatar class="example-header-image"></div> <mat-card-title>{{question.title}}</mat-card-title> </mat-card-header> <mat-card-content> <h3>{{question.body}}</h3> </mat-card-content> <mat-card-actions> <button mat-button>{{question.answer1}}</button> <button mat-button>{{question.answer2}}</button> <button mat-raised-button color="accent">Skip<mat-icon>skip_next</mat-icon></button> </mat-card-actions> </mat-card>

I found this Post where someone is trying to do basically the same thing. Unfortunately both answers on that post don't work for me. I figured that they don't work due to the post being 4 years old and me using a newer version of rxjs and angular.

Any help is much appreciated. Thank you!

Answer 1

Currently you code "works" because you are piping your observable to the async pipe handler which holds executing the ngFor until the observable is resolved.

I would alter your code so that you subscribe to the observable and handle the ensuing result. Actually, I would first convert to a promise and await it since, IMO, that style is more readable and predictable, especially for a "one and done" event.

So alter your component like so (NOTE: I've left off the imports and decorator for sake of brevity):

export class PlayComponent implements OnInit {

  user_id: Pick<User, "id"> | undefined;
  unanswered_questions: Question[];
  question$: Observable<Question> | undefined;
  questionIndex = 0;

  constructor(
    private questionService: QuestionService,
    private authService: AuthService
  ) { }

  async ngOnInit(): Promise<void> {
    this.user_id = this.authService.userId;
    await this.unanswered_questions = this.getUnansweredQuestions(this.user_id).toPromise();
  }

  getUnansweredQuestions(user_id: Pick<User, "id"> | undefined):    Observable<Question[]> {
    return this.questionService.fetchAllUnansweredQuestions(user_id);
  }

  skipQuestion(): void {
    if (this.questionIndex !== this.getUnansweredQuestions.length) {
     this.questionIndex++;
     }
  }
}

And then your HTML:

<mat-card class="question-card" *ngIf="unanswered_questions">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>{{unanswered_questions[questionIndex].title}}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <h3>{{unanswered_questions[questionIndex].body}}</h3>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>{{unanswered_questions[questionIndex].answer1}}</button>
    <button mat-button>{{unanswered_questions[questionIndex].answer2}}</button>
    <button mat-raised-button color="accent" (click)="skipQuestion()">Skip<mat-icon>skip_next</mat-icon></button>
  </mat-card-actions>
</mat-card>

By adding ngIf to your matCard you prevent rendering until the observable is resolved.