How to handle Angular Template when change value of variable? (async / await and for loop)

Question

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

Why are you modifying arrayBouquetSrc in getSrc(), and then returning the same array in order to assign it to the same variable again? — Pieterjan
– Pieterjan, Commented Sep 18, 2021 at 6:56

Pieterjan · Accepted Answer · 2021-09-18 07:29:58Z

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>

Ihar Dziamidau · Accepted Answer · 2021-09-18 06:54:08Z

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.

Collectives™ on Stack Overflow

How to handle Angular Template when change value of variable? (async / await and for loop)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related