我有这样的数据库结构
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>
。我只想避免刷新所有日期。它仅刷新该行上的项目价格,而不是所有行。