comment vous attendez du chargement des données avant vue dans angulaire 2

Question

Composant:

export class HomeComponent implements OnInit { 

    tridentData: TridentData; 

    constructor(private tridentServices: TridentService) { } 

    ngOnInit() { 
    this.tridentServices.getTridentData() 
        .subscribe(
         (data: TridentData) => { 
         this.tridentData = data; 
         } 
        ) 
    } 
} 

HTML:

<h1>{{ tridentData }}</h1> <---results in undefined 

Le problème:

J'appelle getTridentData() (A GET demande, qui renvoie j fils) sur mon objet tridentData. J'ai un problème ASYNC où la vue se charge avant que mon objet tridentData puisse récupérer les données de la base de données. Cela entraîne tridentData dans undefined et toute ma page se brise. Comment puis-je implémenter une animation de chargement et faire en sorte que la vue attende que les données soient chargées avant de s'ouvrir?

Answer 1

Sur votre modèle, vous pouvez ajouter une condition à la balise h1:

<h1 *ngIf="tridentData">{{ tridentData }}</h1> 

Answer 2

Nous avions besoin de voir votre code getTridentData() pour être sûr, mais vraiment ce que vous voulez sans doute faire est d'utiliser la async tuyau.

{{ tridentData | async }}