Question 119051 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – How remove a product in shopping cart of user current logged (angular/Firestore)?

I’m trying to delete a product that I added to my cart but I can’t.
I’m new with Angular and Firebase.

below you will see the different functions to perform the deletion.

import { Product } from 'src/app/models/product.model';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})

export class HeaderComponent implements OnInit {

constructor(private auth: AngularFireAuth){}

  onDeleteProductOnShoppingCart(productID: Product){
    this.auth.onAuthStateChanged((userAuth) => {
      const userIDAuth = userAuth.uid;
      if (userAuth.uid) {
        const userDoc = this.dbstore.collection('users').doc(userIDAuth);
        const userShoppingProduct = userDoc.collection('shopping');
        userShoppingProduct.doc(productID.id).get().subscribe(doc => {
          if(doc.exists) {
            doc.ref.delete();
          }
        });
      }
    })
  }

}

 <div class="mb-3" *ngFor="let product of products">
    <img class="w-24 h-24 rounded-lg" src="{{ product.imageURL[0] }}" alt="Neil image">
    <p class="text-sm pt-2 font-medium text-gray-900 truncate dark:text-white">
      {{ product.name }}
    </p>
    <p class="text-sm price-cart  truncate dark:text-gray-400">
     <strong>{{ product.price | currency: 'XOF'}}</strong>
     <span style="color:black"> x {{ product.quantity }}</span>
    </p>
    <div class="inline-flex delete-btn absolute top-0 right-2 mt-1 items-center text-base font-semibold text-gray-900 dark:text-white">
       <button (click)="onDeleteProductOnShoppingCart(product)">delete</button>

    </div>
</div>

when i click delete nothing happens.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    console result: enter image description here

    data structure in firebase: enter image description here


  2. 0

    It might because of the usage of onAuthStateChanged which returns an Observable.

    You could try this instead

    onDeleteProductOnShoppingCart(productID: Product){
  this.auth.authState.subscribe((userAuth) => {
    const userIDAuth = userAuth.uid;
    if (userAuth.uid) {
      const userDoc = this.dbstore.collection('users').doc(userIDAuth);
      const userShoppingProduct = userDoc.collection('shopping');
      userShoppingProduct.doc(productID.id).get().subscribe(doc => {
        if(doc.exists) {
          doc.ref.delete();
        }
      });
    }
  })
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search