Angular 11：模板未在 http 请求订阅上更新，即使使用 changedetector()

Question

I'm stuck into this problem my template is not beeing updated with the new values from the subscription even it's updated when I console Log it

In service:

getExam(teacherUsername:string,courseCode:string,examID:number){
    return this.http.post<{error:boolean,message:string,exam?:Quiz}>('https://the url goes here',
    {
      teacherUsername:teacherUsername,
      courseCode:courseCode,
      examID:examID
    })}

in the component:

    quiz!:Quiz;
    loadQuiz(){
    this.courseService.getExam("getTeachernameFromLocalStorage","getCourseIDFromLocalStorage",this.retrieveTheQuiz()).subscribe(
           res =>{
             if(res.error == false){
              this.quiz = res.exam!;
               this.changeDetectorRef.detectChanges();
                console.log(this.quiz);
              }}
ngOnInit(){
this.loadQuiz();
}

in template:

{{quiz.quizSetup?.quizTitle}}

I'm calling also detectChanges() and nothing happens the templatae is not updated !

Answer 1

@Component({
    selector: 'app-selector',
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `...`
})

set changeDetection onPush for your componente, and then use inside the subscription how you already made.

or, you can use a boolean and ngIf inside your template:

loadData = false;

ngOnInit(): void {
  this.loadData = true;
  this.courseService.getExam().substribe(res => {
    // do stuff
    this.loadData = false; // set if to false when data is loaded
  });
}

template:

<div *ngIf="!loadData">
  your content
</div>

this will force the page to be rendered again. I prefer first option.