如何从 subscribe() function 分配全局变量并更新视图

Question

I am doing the task and I have a problem I can't assign value to global to be seen in the view in angular8. I know what is asynchronous but how to assign the value and update the view.

post-details.component.ts

export class PostDetailsComponent implements OnInit {
      indexOfPost;
      titles=[];
      subscription: Subscription;
      renderPost:boolean=false;
      constructor(private activatedRoute:ActivatedRoute,private getSharedTitles:ShareInfoTitleService,private detectChanges: ChangeDetectorRef) {
        this.subscription = this.getSharedTitles.getMessage().subscribe((title)=>{
          this.titles=title.titles;
          this.renderPost=true;
          this.detectChanges.markForCheck();

        });
      }    
      ngOnInit() {
        this.indexOfPost=this.activatedRoute.snapshot.paramMap.get("id");

      }
    }

post-details.component.html

<p *ngIf="renderPost">works</p>

It does not work. My aim is to show the titles in post-details.component.html. I'll be grateful for the tips.Regards

Answer 1

You can use async pipe which unsubscribes auto-magically.

export class PostDetailsComponent implements OnInit {
      indexOfPost;
      titles: Observable<any> = this.getSharedTitles.getMessage();

      constructor(private activatedRoute:ActivatedRoute,private getSharedTitles:ShareInfoTitleService,private detectChanges: ChangeDetectorRef) {

      }  

      ngOnInit() {
        this.indexOfPost=this.activatedRoute.snapshot.paramMap.get("id");

      }
    }

in template

<p *ngIf="(titles | async)">works</p>

Answer 2

There is no need to write too much for a simple task. Just explore async pipe and it will automatically subscribe and unsubscribe.

export class PostDetailsComponent implements OnInit {

      message$ = this.getSharedTitles.getMessage();

      constructor(private activatedRoute:ActivatedRoute,private getSharedTitles:ShareInfoTitleService) {

      }    
      ngOnInit() {
        this.indexOfPost=this.activatedRoute.snapshot.paramMap.get("id");

      }
    }

In template

    <p *ngIf="( message$ | async) as message">{{message.title}}</p>