El código actual intenta usar el enfoque de canalización asíncrona en lugar de usar una asignación en la suscripción. Pero si el retraso está ocurriendo en el servicio, el valor inicial no se representa en la plantilla, cuando los datos están listos, el valor se representa como se esperaba, estoy tratando de imitar el comportamiento de representación que se presenta cuando uso this this. título2 .
El componente:
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 });La plantilla:
<h4>{{ title$ | async }}</h4> <h4>{{ title2 }}</h4>Hay algunos enfoques para esto, pero dado el código que proporcionó, podría usar el operador switchMap de la siguiente manera:
Actualice this.title$ = this.sampleService.loadTitle(); a this.title$.pipe(switchMap(() => this.sampleService.loadTitle()));
Lo que está haciendo actualmente es sobrescribir la propiedad title$ con un valor diferente. switchMap hace que cada vez que el primer observable emita un valor (en su caso, esto solo sucede una vez con su of('Default Title') ) se dará la vuelta y creará otro observable que luego observará para los valores emitidos.
Puede usar ng-container para suscribirse a su observable y cambiarle el nombre para que cuando los datos estén listos, simplemente pueda usarlos como una variable regular en la plantilla. apilar
contenedor.componente.ts
export class ItemsComponent implements OnInit { @Input() name: string; items$: Observable<string[]>; title$: Observable<string>; constructor(private sampleService: SampleService) {} ngOnInit() { this.title$ = this.sampleService.loadTitle(); this.items$ = this.sampleService.loadItems(); } }contenedor.componente.html
<ng-container *ngIf="title$ | async as title"> <h4>{{ title }}</h4> </ng-container> <ng-container *ngIf="items$ | async as items"> <list *ngIf="items.length" [items]="items"></list> </ng-container>Tenga en cuenta que siempre que use la palabra asíncrono, es una nueva suscripción.
Si usa canalización asíncrona en el mismo observable varias veces en su plantilla, está creando varias suscripciones.
Usar el operador startWith también es una buena opción si desea tener un valor inicial diferente al de su llamada de servicio. Un buen lugar para usar startWith sería para un formControl valueChanges observable, ya que no tiene un valor inicial y solo se activa cuando cambia un valor.