Angularfire2 v5 avoid reload all data when using async pipe

Question

I have db structure like this

cart:
  yyy:
    productId: aaa
    count: 2
  zzz:
    productId: bbb
    count: 1
product:
  aaa:
    name: AAA
  bbb:
    name: BBB

I join them and getting and listing data by below code

cart.ts

cartRef: AngularFireList<any>;
cart: Observable<any>;

constructor(public db: AngularFireDatabase) {}

ionViewDidLoad() {
  this.cartRef = this.db.list(`/cart`);
  this.cart = this.cartRef
  .snapshotChanges()
  .map(changes =>
   enter code hereenter code here changes.map(c => ({
      key: c.payload.key,
      product: this.db.object(`product/${c.payload.key}`).valueChanges(),
      ...c.payload.val()
    }))
  );
}

cart.html

<ion-item *ngFor="let item of cart|async">
  <ion-row *ngIf="item.product | async; let product; else loading">
    <ion-col col-6>
      <strong>{{product.name}}</strong>
      <h3> {{(product.price*item.count)}}</h3>
    </ion-col>
    <ion-col>
        <ion-icon name="add-circle" (click)="addItem(item.key,item.count)">
          <span class="countSpan">{{item.count}}</span>
        </ion-icon>
    </ion-col>
  </ion-row>
</ion-item>

Now the problem is that when I increase cart items count by addItem function then It refresh all the data inside <ion-row>. I just want to avoid all date refreshed. It only refresh the item price on that row only not all rows.