Soy novato en Angular, pero para estudiar quiero obtener datos de la API. Sin embargo, espero alrededor de 2 segundos la respuesta de la API, por lo que mi página se carga y no se muestra la variable en la que quiero guardar el resultado de la solicitud enviada a la API.

Mi API devuelve JSON como Lista:

 [ { "idWebsite": Guid, "name": "string", "url": "string", "location": "string", "enviroment": "string", "lastTestedByBenchmark": "string" }, { "idWebsite": Guid, "name": "string", "url": "string", "location": "string", "enviroment": "string", "lastTestedByBenchmark": "string" } ]

Mi código angular:

 export class AppComponent { title = 'APITest'; Websites = new Array<WebsitesListViewModel>(); constructor(private http: HttpClient) { } ngOnInit(){ this.http.get<Array<WebsitesListViewModel>>('APIUrl').subscribe(data=>{ this.Websites=data; }) } } export class WebsitesListViewModel{ IdWebsite:string = ""; Name:string=""; Url:string="" Location:string=""; Enviroment:string=""; LastTestedByBenchmark:string=""; }

Leí que en ese caso se debe usar Observable. Usando el tutorial y la documentación, quería hacerlo, pero la variable anidada en widomu aún no se actualiza después de recibir la respuesta.

 export class AppComponent { title = 'APITest'; Websites$ = new Array<WebsitesListViewModel>(); constructor(private http: HttpClient) { //this.GetAll().subscribe(result=>this.Websites = result); this.GetAll().subscribe(response=>{ this.Websites$ = response console.log(this.Websites$) }) console.log(this.Websites$) } GetAll(): Observable<WebsitesListViewModel[]> { return this.http.get<WebsitesListViewModel[]>('APIURL') } } export class WebsitesListViewModel{ IdWebsite:string = ""; Name:string=""; Url:string="" Location:string=""; Enviroment:string=""; LastTestedByBenchmark:string=""; }

PD: si en Angular constructor -> método de suscripción, agrego console.log (sitios web) en la consola, obtuve el resultado de la API