0
351
Views¿Cómo manejar la plantilla angular cuando cambia el valor de la variable? (asincronismo/espera y bucle for)
Hago un Proyecto que por firebase y Angular.
Primero este es mi código ts.
... async ngOnInit() { this.email = await this.loginServise.userInfo(); this.arrayBouquetName = await this.fireStore.collection("user").doc(this.email).get().toPromise(); this.arrayBouquetName = await this.arrayBouquetName.get("src"); this.arrayBouquetSrc = await this.getSrc(); console.log(this.arrayBouquetSrc); } async getSrc() { return new Promise(async(resolve, reject) => { for await (let item of this.arrayBouquetName){ this.arrayBouquetSrc.push(item); } console.log("Does it work? : ",this.arrayBouquetSrc) resolve(this.arrayBouquetSrc); }) } ...y este es mi archivo de plantilla (HTML)
<div id="canvas-my-bouquet"> <div id="container-my-bouquet"> check it : {{arrayBouquetSrc}} </div> </div> Cuando ejecuto este código, no puedo ver el valor de arrayBouquetSrc debajo de la imagen
sin embargo, cuando cambio arrayBouquetSrc => arrayBouquetName , puedo ver el valor de la variable.
No se cual es la razon y como solucionar esta situacion...
yo se si soy dinamico
2 answers
Answer question0
Intente usar la tubería async según lo recomendado por angular :
private userInfo$: Observable<User>; private bouquets$: Observable<Boucket[]>; private boucketSources$: Observable<string[]>; constructor(private fireStore: FireStore) { // Don't use toPromise inside this method this.userInfo$ = this.loginServise.userInfo(); // When the userInfo$ changes, map it to get the documents from FireStore this.bouquets$ = this.userInfo$.pipe(map((userInfo) => { return this.fireStore.collection("user").doc(userInfo).get(); })); // Then you want the names to be in a seperate variable this.boucketSources$ = this.bouquets$.pipe(map((bouckets) => { return bouckets.map(b => b.src); })); } Ahora puede usar la tubería async en su plantilla
<div id="canvas-my-bouquet"> <div id="container-my-bouquet"> <div *ngFor="let boucket of (boucketSources$ | async)" class="boucket"> check it : {{boucket}} </div> </div> </div>0
Prueba esto: reemplaza tu método.
... async ngOnInit() { this.email = await this.loginServise.userInfo(); this.arrayBouquetName = await this.fireStore.collection("user").doc(this.email).get().toPromise(); this.arrayBouquetName = await this.arrayBouquetName.get("src"); // does this line work? this.fillArrayBouquetSrc(); console.log(this.arrayBouquetSrc); } fillArrayBouquetSrc() { for (let item of this.arrayBouquetName){ this.arrayBouquetSrc.push(item); } console.log("Does it work? : ",this.arrayBouquetSrc) } ...NOTA: No necesita hacer que el método sea asíncrono. Hay una operación síncrona. Y no regrese nada del método. Bcz de eso ya está cambiando this.arrayBouquetSrc. Está disponible como this.arrayBouquetSrc en los métodos de instancia de clase.