Estoy creando una aplicación Angular y estoy tratando de interpolar el valor de una cadena en cada iteración forEach en una matriz de cadenas. (quotesData es una matriz de cadenas de las que estoy tomando valores)
Mi función se ve así:
export() { this.quotesData.forEach(element => { this.quote = element; this.wait(1000); \\ <- manually written function to postpone next line execution for 1s console.log(this.quote); });}
El problema es que el valor en la interpolación HTML para {{quote}} no se actualiza hasta que finaliza la última iteración. Sin embargo, el valor de this.quote se actualiza correctamente y se muestra en la consola y en el depurador después de cada iteración.
No estoy seguro de cómo se implementa su función de espera, pero supongo que todavía se ejecuta de forma asíncrona. Para solucionarlo, sugeriría aumentar el tiempo a 5000, por ejemplo, y verificar si los valores se muestran inmediatamente en la consola o no.
De lo contrario, aquí hay un ejemplo de trabajo usando async await:
import { Component } from '@angular/core'; @Component({ selector: 'hello', template: `<button (click)="display()" >Display</button><h1>Hello {{quote}}!</h1>`, }) export class HelloComponent { quotesData: Array<string> = ['A', 'B', 'C']; quote: string = ''; wait(ms) { return new Promise((res) => setTimeout(res, ms)); } async display() { for (let quote of this.quotesData) { this.quote = quote; await this.wait(1000); console.log(this.quote); } } }