为什么订阅方法工作两次?

时间:2018-03-02 09:29:05

标签: angular firebase ionic-framework subscribe

我订阅了ionic2项目中的firebase列表。

这是我在服务中的功能:

  getLastOrderBeta() {
    return this.db.list(`Ring/${localStorage.getItem('localstorage')}`, {
        query: {
          equalTo: false,
          orderByChild: 'status',
          limitToLast: 2,
        }
      })
      .map((orders: any) => {
        return orders.map((order: any) => {
          order.userInfo = this.getProfile(order.userid);
          return order;
        });
      });
  }

这是我的订阅:

  subscribeOrder(){
    this.orderList = this.orderProvider.getLastOrderBeta();
    this.orderList.subscribe((s: any) => {
      this.selectedOrder = "";
      console.log(this.playSound,"outside the if");
      if (this.platform.is('cordova') && this.playSound && s.length) {
          console.log(this.playSound,"inside the if");
          this.audioProvider.playRingTone();
      }
      this.playSound = true;
    });
  }
  

subscribeOrder()日志显示两次。

这是我的HTML代码:

 <ng-container *ngIf="orderList | async as orders">
    <span *ngFor="let order of orders?.slice().reverse(); let first = first; let last = last">
      <ng-container *ngIf="first && !selectedOrder" [ngTemplateOutlet]="orderView" [ngTemplateOutletContext]="{order:order,selected:false}"></ng-container>
      <ng-container [ngTemplateOutlet]="last && (last !== first) ? beforeLastOrder : waiting" [ngTemplateOutletContext]="{order:order}"></ng-container>
    </span>
    <ng-container *ngIf="!orders.length">
      <ion-fab bottom left>
        <button (click)="logOut()" ion-fab mini>
          <ion-icon name="power"></ion-icon>
        </button>
        <button (click)="openSettings()" ion-fab mini>
          <ion-icon name="wifi"></ion-icon>
        </button>
      </ion-fab>
      <span *ngIf="batterPercentage" class="battery">{{batterPercentage}}%</span>
      <img *ngIf="!selectedOrder" class="rnb-img-waiting" src="assets/logo.png">
      <ion-item (click)="showModal()" class="ion-footer">
        <span class="no-orders">Previous Orders</span>
      </ion-item>
    </ng-container>
  </ng-container>

对此重复的任何解释我如何解决。

感谢。

2 个答案:

答案 0 :(得分:2)

对于你的情况,我猜有两种解决方案:

  1. 根本不要使用异步管道,只需在订阅中保存来自firebase的数据并将其提供给模板:

     subscribeOrder(){
        this.orderList = this.orderProvider.getLastOrderBeta();
        this.orderList.subscribe((s: any) => {
          this.selectedOrder = "";
          console.log(this.playSound,"outside the if");
          if (this.platform.is('cordova') && this.playSound && s.length) {
              console.log(this.playSound,"inside the if");
              this.audioProvider.playRingTone();
          }
          this.playSound = true;
          this.orders = s;
        });
      }
    
  2. 然后在你的模板中:                                     

    1. 如果您需要副作用,请使用异步管道,但用do运算符替换组件中的subscribe:

      subscribeOrder(){
          this.orderList = this.orderProvider.getLastOrderBeta()
              .do((s: any) => {
                this.selectedOrder = "";
                console.log(this.playSound,"outside the if");
                if (this.platform.is('cordova') && this.playSound && s.length) {
                    console.log(this.playSound,"inside the if");
                    this.audioProvider.playRingTone();
                }
                this.playSound = true;
                this.orders = s;
              });
            }
      

答案 1 :(得分:0)

我找到了解决方案,

调试后我发现问题来自 Angularfire2 查询,而且完全来自 limitToLast

所以我禁用了 limitToLast 。而我创建的代码具有相同的作用。

成为:

return this.db.list(`Ring/${localStorage.getItem('localstorage')}`, {
    query: {
      equalTo: false,
      orderByChild: 'status'
    }
  })
  .map((orders:any)=>{return orders.slice(-2)})
  .map((orders: any) => {
    return orders.map((order: any) => {
      order.userInfo = this.getProfile(order.userid);
      return order;
    });
  })  as FirebaseListObservable<any[]>;

这是正常的。

感谢。