How to initialized an observable for async pipe in the template trying to mimic an assignation in th-CodePudding

The current code is trying to use the async pipe approach instead of using an assignation in the subscription. But if the delay is happeing in the service, the initial value is not rendering in the template, when the data is ready the value is rendering as expected, I am trying to mimic the rendeing behavior that is presented when I am using this this.title2.

The component:

title$: Observable<string> = of('Default Title'); // I am not sure if this assignation is right
title2 = 'Default Title 2';

constructor(private sampleService: SampleService) {}

// Load title has a delay in the response
this.title$ = this.sampleService.loadTitle();

this.sampleService.loadTitle().subscribe((title) => {
  this.title2 = title; // the assignation 
});

The template:

<h4>{{ title$ | async }}</h4>
<h4>{{ title2 }}</h4>

The sample is in this stackblitz

CodePudding user response：

I think you want to use startWith that do an initialvalue of an observable. Try to change the code to this, and it works.

  this.title$ = this.sampleService
      .loadTitle()
      .pipe(startWith('Default Title'));

CodePudding user response：

There are a few approaches to this, but given the code you have provided, you could use the switchMap operator as follows:

Update this.title$ = this.sampleService.loadTitle(); to this.title$.pipe(switchMap(() => this.sampleService.loadTitle()));

What you are doing currently is overwriting the title$ property with a different value. switchMap makes it so that every time the first observable emits a value(in your case this only happens once with your of('Default Title')) it will turn around and create another observable which it will then observe for emitted values.