Obtention de données dans une variable à partir de la requête http get

Question

J'ai besoin d'obtenir les données d'une API structurée en JSON. Vous trouverez ci-dessous un code qui récupère les données et console.log imprime joliment toutes les données. Mais maintenant je veux utiliser ces données sur un fichier modèle en utilisant l'interpolation de chaîne. Ou en dehors de cette fonction de toute façon. Tout ce que j'ai essayé vient d'imprimer 'undefined'.

J'ai regardé quelques tutoriels et lu des articles à ce sujet, mais je ne pouvais tout simplement pas le faire fonctionner. Disons que je veux utiliser les données dans le modèle dataview.component.html, que dois-je faire? NB: Je ne sais pas si cela compte, mais dataview est un composant enfant du composant de l'application (app/dataview).

import { Component, OnInit } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 


@Component({ 
    selector: 'app-dataview', 
    templateUrl: './dataview.component.html', 
    styleUrls: ['./dataview.component.css'] 
}) 
export class DataviewComponent implements OnInit { 

    results: string[]; 
    caretClicked = false; 
    menuOpened = false; 

    constructor(private http: HttpClient) {} 

    expandData() { 
    this.caretClicked= !this.caretClicked; 
    } 

    openMenu() { 
    this.menuOpened= !this.menuOpened; 
    } 

    ngOnInit(): void { 
     // Make the HTTP request: 
     this.http.get('MY URL HERE').subscribe(data => { 
      // Read the result field from the JSON response. 
      this.results = data['results']; 
      console.log(data); 
     }); 
    } 
} 

Answer 1

Pour accéder aux données à partir du modèle du composant, vous pouvez lier à la variable results.

Vous pouvez lier à n'importe quelle propriété spécifiée dans la classe de composant. Dans votre exemple, ce serait results, caretClicked et menuOpened.

Le problème que je devine est que le get HTTP est asynchrone. Vous devez gérer cela dans votre modèle. Par exemple, vous pouvez utiliser un *ngIf = "results" en haut de votre modèle pour vous assurer que le modèle ne tente pas d'afficher jusqu'à ce que les données soient récupérées.