异步函数触发两次 - 角度firestore

Question

我有一个

的功能

1. 使用auth服务获取当前登录用户的状态和电子邮件。
2. 使用与firestore用户集合对话的userService来检索所有用户，然后根据电子邮件将当前登录用户分配给User变量。
3. 使用与嵌套在'users'集合中的集合对话的cartService来获取loggedInUser的购物车集合。
4. 在检索需要在方法中传递的特定购物车对象后，再次使用cartService来检索特定购物车中的所有商品。
5. 使用productService从先前检索的购物车中删除特定产品。

我遇到的问题是当我点击按钮时，整个方法调用被调用两次。附件是按钮的HTML代码加上整个功能本身。

'displacement' has not been declared

// FUNCTION

<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>

该函数工作正常，但触发两次，这增加了我想要避免的firebase调用。请让我知道我做错了什么以及如何解决它。