Some fields are not saved into firestore using ionic

Issue

I'm facing an issue, when I try to save my data into firebase, some of the fields are not saved into it, whereas I have the right values in the console.

I'm trying to store a food object that has the current user id and name as attribut and the form values, for the form values it's ok but not for the current user data.

Here is my function: food.service.ts

private foodCollection: AngularFirestoreCollection<FoodView>;
...
addFood(food: FoodView) {
this.loadingService.present();
let foodToAdd: FoodView = food;
this.authService.getUserData().subscribe((u) => {
  foodToAdd.cookerName = u.displayName;
  foodToAdd.cookerId = u.uid;
});

console.log(foodToAdd);
return this.foodCollection.add(foodToAdd).then(() => this.loadingService.dismiss());}

The function where the query is: from the AngularFireStoreCollection

/**
 * Add data to a collection reference.
 *
 * Note: Data operation methods are done on the reference not the 
           query. This means
 * when you update data it is not updating data to the window of 
           your query unless
 * the data fits the criteria of the query.
 */
 add(data: T): Promise<DocumentReference<T>>;

here is where my function is used: add-food.page.ts

addFood() {
this.setFood();
this.foodService.addFood(this.food).then(() =>{
  this.presentAlert();
  this.tagList = [];
  this.ingredientList = [];
  this.addFoodForm.reset();
}
);  }

my auth service where I get user data:

  getUserData() {
return this.afs.doc<User>(`users/${this.getUserId()}`).valueChanges();  }

this is my output in console for my food object before I try to store him into firebase:

And this is the same object in firebase but whithout the needed information:

As you can see, the fields, cookerName and cookerId are not available.

I'm using Ionic 5 with Angular 11.

How can I fix it ?

Thank you for your help

Edit:

I've finally solve this, the problem was in my loading service that have async function (present and dismiss), by removing this.loadingService.present() and this.loadingService.dismiss() it works well

Solution

Solution

To solve this problem, I've delete function the LoadingService class. As they were asynchronous the callback from Firebase with the right updated food value was done before the food value was update.

I've change this this:

addFood(food: FoodView) {
this.loadingService.present();
let foodToAdd: FoodView = food;
this.authService.getUserData().subscribe((u) => {
  foodToAdd.cookerName = u.displayName;
  foodToAdd.cookerId = u.uid;
});

console.log(foodToAdd);
return this.foodCollection.add(foodToAdd).then(() => this.loadingService.dismiss());}

for this:

  async addFood(food: FoodView) {
    this.authService.getUserData().subscribe((u) => {
      food.cookerName = u.displayName;
      food.cookerId = u.uid;
    });

    return this.foodCollection.add(food);
  }

and it works pretty well, I just have to change how my loading service works

Answered By - E-Mohamed