Angularfire2 v5避免在使用异步管道时重新加载所有数据

时间:2017-12-03 18:36:37

标签: firebase firebase-realtime-database ionic3 angularfire2 angularfire5

我有像这样的数据库结构

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

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

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>

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

0 个答案:

没有答案