Как назначить глобальную переменную из функции subscribe () и обновить представление

Question

Я выполняю задачу, и у меня возникла проблема: я не могу присвоить значение глобальному, которое будет видно на виде в angular8. Я знаю, что асинхронно, но как назначить значение и обновить представление.

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>

не работает. Моя цель - показать заголовки в post-details.component.html. Буду благодарен за советы. С уважением

Answer 1

Нет необходимости писать слишком много для простой задачи. Просто изучите async pipe, и он автоматически подпишется и откажется от подписки.

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");

      }
    }

В шаблоне

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

Answer 2

Вы можете использовать асинхронный канал , который автоматически отменяет подписку.

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");

      }
    }

в шаблоне

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