0
354
ViewsHow to handle Angular Template when change value of variable? (async / await and for loop)
I make a Project which by firebase and Angular.
First this is my ts code.
...
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);
})
}
...
and this is my template file (HTML)
<div id="canvas-my-bouquet">
<div id="container-my-bouquet">
check it : {{arrayBouquetSrc}}
</div>
</div>
When i run this code i can't see value of arrayBouquetSrc below picture
however,When i change arrayBouquetSrc => arrayBouquetName, I can see value of variable.
I don't know what is reason and how to solve this situation...
I know If i dynamic
·
Santiago Trujillo
2 answers
Answer question0
Try using the async pipe as recommended by 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);
}));
}
Now you can use the async pipe in your template
<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>
·
Santiago Trujillo
Report
0
Try this: replace your method.
...
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)
}
...
NOTE: You dont need to make the method async. There is a synchronous operation. And do not return anythink from the mothod. Bcz of that it is already changing this.arrayBouquetSrc. It is available as this.arrayBouquetSrc in the class instance methods.
·
Santiago Trujillo
Report
Answer question