2

我有这样的数据库结构

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

我加入他们并通过以下代码获取和列出数据

购物车.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()
    }))
  );
}

购物车.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>

现在的问题是,当我按addItem功能增加购物车项目数时,它会刷新里面的所有数据<ion-row>。我只想避免刷新所有日期。它仅刷新该行上的项目价格,而不是所有行。

4

0 回答 0