Асинхронная функция срабатывает дважды - угловой пожарный депо

Question

У меня есть функция, которая

1. Использует службу аутентификации для получения статуса и адреса электронной почты текущего зарегистрированного пользователя.
2. Использует userService, который обращается к коллекции пользователей firestore, чтобы затем получить всех пользователей.присваивать текущему зарегистрированному пользователю переменную User на основе электронного адреса.
3. Использует cartService, который обращается к коллекции, вложенной в коллекцию 'users', для получения коллекции тележек loggedInUser.
4. Снова использует cartServiceпосле извлечения конкретного объекта корзины, который необходимо передать в метод для извлечения всех продуктов из определенной корзины.
5. Использует службу productService для удаления определенного продукта из ранее извлеченной корзины.

У меня проблема в том, что весь вызов метода вызывается дважды, когда я нажимаю кнопку.Прикрепленный HTML-код для кнопки плюс вся функция.

<table *ngIf="myCartProducts?.length > 0" class="table table-responsive-sm">
    <thead class="thead-inverse">
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let product of myCartProducts">
        <td>
          {{ product.name }} 
          <br> 
          {{product.description}}
          <br>
          {{product.size}}
          <br>
          <img height="50px;width:50px" src="{{product.img1}}">

        </td>
        <td>{{ product.price }}</td>
        <td><a routerLink="/cartproduct/{{ product.id }}" class="btn btn-primary "><i class="fa fa-arrow-circle-o-right"></i> Details</a></td>
        <td><a style="color:white;" id="{{product.id}}" (click)="removeFromCart($event)" class="btn btn-danger "><i class="fa fa-trash"></i> Remove</a></td>

        </tr>
    </tbody>
  </table>

// FUNCTION

removeFromCart(event){
    var target = event.target || event.srcElement || event.currentTarget;
    var idAttr = target.attributes.id;


    this.authService.getAuth().subscribe(auth => {
      if (auth) {
        this.isLoggedIn = true;
        this.loggedInUser = auth.email;

        this.userService.getUsers().subscribe(users => {
          this.allUsers = users;
          this.myUser = this.allUsers.filter(user => user.email == this.loggedInUser)
          //  console.log(this.myUser);
          this.currentUser = this.myUser[0];

          this.cartService.getCarts(this.currentUser).subscribe(carts => {
            this.allCarts = carts;
            this.mycart = this.allCarts[0];
            console.log(this.mycart);

            this.cartService.getCartProduct(target.id,this.currentUser,this.mycart).subscribe(product =>{
              this.productToDelete = product;

              console.log(this.productToDelete);

              this.productService.deleteProductFromCart(this.productToDelete,this.currentUser, this.mycart);

            });



          });





        });

      } else {
        this.isLoggedIn = false;
      }
    });

  }

Функция работает просто отлично, но срабатывает дважды, что увеличивает количество моих обращений к firebaseчего я хочу избежать.Пожалуйста, дайте мне знать, что я делаю неправильно и как это исправить.