Angularfire 2 和 Ionic 2

Posted 2023-03-13

【中文标题】Angularfire 2 和 Ionic 2

【英文标题】：Angularfire 2 and Ionic 2

【发布时间】：2017-07-21 13:35:12

【问题描述】：

我在 Firebase 中使用 Ionic 2 和 Angularfire 2，这是我的数据结构：

这是我的代码：carrito.ts

import  Component  from '@angular/core';
import  NavController, NavParams  from 'ionic-angular';
import AngularFire, FirebaseListObservable, FirebaseObjectObservable  from 'angularfire2';
import ShareService from '../../pages/services/ShareService';

 @Component(
   selector: 'page-carrito',
   templateUrl: 'carrito.html'
 )



 export class Carrito 
    public restaName:any;
    serviceData: string;
    items: Array<any>;

restas: FirebaseListObservable<any>;
carrito: FirebaseListObservable<any>;
 constructor(public navCtrl: NavController, public navParams: NavParams, af: AngularFire,
  private shareService: ShareService) 
    this.serviceData = shareService.getUserName();
    this.restaName = this.serviceData
    //alert(this.restaName)
    this.restas = af.database.list('/restas', 
      query: 
        orderByChild: 'nombre',
        equalTo: this.restaName
      
    );


    this.carrito = af.database.list('/carrito',  
      query: 
        orderByChild: 'restaname',
        equalTo: this.restaName
      

    );

这是我的部分 carrito.html（模板）

<ion-grid *ngFor="let resta of restas | async">
    <ion-row>
      <ion-col width-25><img style="margin-top: -10px" src="           resta.imagen" ></ion-col>
      <ion-col width-75>
        <h5>resta.nombre</h5>
        <span>Comida resta.comida</span>
        </ion-col>  
      </ion-row>
   </ion-grid>

   <ion-list>
    <ion-item  text-wrap *ngFor="let item of carrito | async ">
       <p> item.prodname </p>
       <p item-right> item.cantidad </p>
       <p item-right> $item.precio </p>
       <p item-right (click)="eliminaItem(item.$key)">
       <ion-icon name="trash"></ion-icon>      
      </p>
    </ion-item>  
   </ion-list>
   ***/////  HERE I WANT TO DISPLAY TOTAL (sum of item.precio) ////***
   <ion-footer *ngIf="total">
    <ion-toolbar>
    <ion-title>Total : $ total </ion-title>
    </ion-toolbar>  
    </ion-footer>
    <ion-toolbar>
    <button full primary clear (click)="sumAriza()">CHECK-OUT</button>
   </ion-toolbar>
   </ion-content>

我一直在阅读 Angular fire 2 文档、Ionic 2 示例，并且我有一个愚蠢的问题：如何从每个对象（行）中汇总 item.precio 字段以获得此列表中的 TOTAL（总和）？ 提前谢谢！

【参考方案1】：

好吧，如果您订阅carrito，您将获得您想要的价值。

让我们开始吧：

//add a total
total: number = 0;
//always save the subscription
totalSubscription: Subscription = null;

ngOnInit() 
   this.totalSubscription = carrito.subscribe((list:any) => 
      this.total = 0; // let's clear the total

      let fixedLength = list.length || 0;
      for (let i = 0; i < fixedLength; i++) 
         this.total += list[i].precio;
      
   );


ngOnDestroy() 
   if (this.totalSubscription !== null) 
       this.totalSubscription.unsubscribe();
   

编码愉快！

【讨论】：

嘿，卡马伦，它有效！ ，非常感谢，我唯一要做的就是从'rxjs/Subscription'导入订阅；如果有人有同样的问题。你才是男人！！

一个问题，如果我想通过restaname过滤，我需要在ngOnInit函数中做什么？我的意思是我只想计算所有的 restaname = '一个特定的名字'。提前谢谢你

在这种情况下，您应该在此处更改您的查询：this.carrito = af.database.list('/carrito', query: orderByChild: 'restaname', equalTo: this.restaName );

感谢您的快速回复，这就是我查询的方式：this.carrito = af.database.list('/carrito', query: orderByChild: 'restaname' , equalTo: this.restaName );在模板中绑定数据时，过滤器（查询）工作正常。但是，如果我添加一条具有不同 restname 的记录，它仍然依赖于 ngOnInit() 函数。希望你能理解我 。就像查询不适用于函数一样，它会计算所有记录。

在添加新记录的地方勾选这个解决方案：***.com/questions/35177288/…