Prezados, bom dia. Tenho uma aplicação com firebase conforme o código a seguir. O que preciso fazer é totalizar os valores dos produtos comprados para saber o total da compra.
OBS: Essa aplicação está sobre ionic3.
Seguem os códigos abaixo:
home.ts
import { Item } from './../../models/item/item.model';
import { ItemListService } from './../../services/items-list/item-list.service';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular/navigation/ionic-page';
import { Observable } from 'rxjs/Observable';
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
itemList$: Observable<Item[]>;
items: Item[];
constructor(
public navCtrl: NavController,
private itemList: ItemListService) {
// monta a lista para exibição
this.itemList$ = this.itemList
.getItemsList()
.snapshotChanges()
.map(changes => {
return changes.map(c => ({
key: c.payload.key,
...c.payload.val()
}));
});
}
}
home.html
<ion-header>
<ion-navbar color="primary" text-center>
<ion-title>
Meu Carrinho
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-list-header>
Items
</ion-list-header>
<ion-item *ngFor="let item of itemList$ | async">
{{item.name}}
<br />R$ {{item.price}}
</ion-item>
</ion-list>
<ion-fab bottom center>
<button navPush="AddItemPage" ion-fab>
<ion-icon name="add"></ion-icon>
</button>
</ion-fab>
</ion-content>
item.model.ts
export interface Item {
key?: string;
name: string;
quantity: number;
price: number;
}
ItemListService.ts
import { Item } from './../../models/item/item.model';
import { Injectable } from "@angular/core";
import { AngularFireDatabase } from "angularfire2/database";
@Injectable()
export class ItemListService {
private itemListRef = this.db.list<Item>('item-list');
constructor(private db: AngularFireDatabase) {
}
getItemsList() {
return this.itemListRef;
}
addItem(item: Item) {
return this.itemListRef.push(item);
}
}
Grato desde já !