Angular: espere hasta que reciba datos antes de cargar la plantilla

Brenda, parte de este gran staff, nos hizo el favor de redactar este artículo porque controla a la perfección dicho tema.

Solución:

Después de estudiar los diferentes enfoques que la gente me dio, encontré la solución en el async tubo. Pero, me tomó un tiempo entender cómo implementarlo.

Solución:

// Declaring the Promise, yes! Promise!
filtersLoaded: Promise;

// Later in the Component, where I gather the data, I set the resolve() of the Promise
this.getFiltersSubscription = this.getFilters().subscribe(
    (filters) => 
        this.filters = filters;
        log.info('API CALL. getting filters');

        this.filtersLoaded = Promise.resolve(true); // Setting the Promise as resolved after I have the needed data
    
);

// In this listener triggered by the dynamic components when instanced,
// I pass the data, knowing that is defined because of the template change

// Listens to field's init and creates the fieldset triggering a service call
// that will be listened by the field component
this.iboService.initIBOsFilters$.subscribe(
    (fieldName) => 
        if (fieldName === 'IBOsRankSelectorFieldComponent') 
            log.data('inside initIBOsFilters$ subscription, calling updateIBOsFilters()', fieldName);
            this.iboService.updateIBOsRankList(this.filters['iboRank'].data);
        
    
);

En la plantilla, uso el async tubería que necesita un Observable o un Promise

    

        

            
 i18n
            

                

                    
                
            
        
    

NOTA:

• async la tubería necesita un Observable o un Promise por lo que entendí, es por eso que la única forma de hacerlo funcionar era creando un Promise
• no usé el resolver enfoque porque se usa cuando llega al componente a través del enrutamiento de Angular. Este componente es parte de un componente más grande y no se instancia a través del enrutamiento como cualquier otro componente normal. (Sin embargo, probé ese enfoque, trabajé un poco con él, no funcionó)

Podrías usar un resolver para asegurarse de que esos datos se carguen (o sus filtros se hayan inicializado) antes de que se active la ruta.

https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html

https://angular.io/api/router/Resolver

homeData?.meta[0].site_desc

Acabo de usar un “?” después de la variable que se ha estado cargando con datos del servidor.

inicio.componente.ts

import  Component, OnInit  from '@angular/core';
import  HomeService  from '../services/home.service';

@Component(
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
)
export class HomeComponent implements OnInit 
  public homeData: any;
  constructor(private homeService: HomeService) 

  ngOnInit(): void 
    this.homeService.getHomeData().subscribe( data => 
      this.homeData = data[0];
    , error => 
      console.log(error);
    );
  

---

---

Utiliza Nuestro Buscador