Le composant affiche un écran vide avant que les données ne soient souscrites à partir de Observable

Question

Je suis actuellement confronté à un problème de souscription des données via Observables. Jusqu'à ce que les données de temps soient souscrites et stockées dans une variable locale (tableau d'objets) pour l'affichage, pendant ce temps le composant se charge et n'affiche donc aucune donnée car il récupère toujours les données du backend. Je suppose que le problème est avec les conditions de course (asynchrone), aucune idée sur la façon d'aborder ce problème? Je lis les données JSON qui récupèrent les valeurs dans 'ObjectArray' et remplit la même chose qu'une table de données PrimeNG sur un composant angulaire à 2 composantes.

<p-dataTable [value]="ObjectArray"> 
    <p-column field="label"></p-column> 
</p-dataTable> 

code

pour vous abonner:

constructor(private store: Store<fromRoot.State>){ 
    this.metaData$ = store.select(fromRoot.getMetadata); 
    } 

    this.metaData$.subscribe(
    data => { 
    if (data.length > 0) { 
     data.forEach(v => this.ObjectArray.push({...v})); 
    } 
    }); 

Answer 1

Vous disposez de trois options Utilisation

En utilisant ngIf ou en utilisant la nouvelle ngIf else et dernier et non le moindre Router Resolve

suppose que les données vous êtes essayer d'afficher est

dataAsync: any;

En utilisant NgIf

<div *ngIf = "dataAsync"> 
    {{dataAsync}} 
</div> 

nouvelle aide Si d'autre pour afficher une invite Chargement

<ng-template #fetching> 
    <p>Fetching...</p> 
    </ng-template> 

    <div *ngIf=" dataAsync; else fetching;"> 
    <strong>Angular 4 If else Usage - {{dataAsync}}</strong> 
    </div> 

Router Resolve

Vérifiez cette plunker Resolve https://plnkr.co/edit/u2qR9J?p=preview

@Injectable() 
export class Resolve implements Resolve<any> { 

    constructor(private service: yourService) {} 

    resolve(route: ActivatedRouteSnapshot) { 
    return this.service.getdata(); 
    } 
} 

Itinéraires

{ 
    path: 'yourpath', 
    component: your Component, 
    resolve: { 
     resolve: Resolve 
    } 

En utilisation sur ce composant ngOnInit

ngOnInit() { 
    this.resolve= this.route.snapshot.data['resolve']; 
    } 

Et puis Afficher détermination dans le modèle.

S'il vous plaît jeter un oeil à ma page pour tous ces concepts angulaires

https://rahulrsingh09.github.io/AngularConcepts

Answer 2

Vous avez plusieurs options:

1 - Afficher un chargeur en attendant vos données, en utilisant *ngIf et afficher la peu de votre modèle quand vous l'avez réellement.

2 - Utilisez un BehaviourSubject et transmettez-lui une valeur d'espace réservé initiale, en attendant la valeur réelle.

3 - Utilisez le tuyau async dans le modèle de votre composant comme ceci: *ngIf="mySubject | async"