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

Question

我订阅了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;
    });
  }

订阅Order（）日志显示两次。

这是我的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>

对这种重复的任何解释我怎么能解决。

谢谢。

Answer 1

对于你的情况，我猜有两个解决方案：

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. 如果需要副作用，请使用异步管道，但用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;
           });
         }

Answer 2

我找到了解决方案，

调试后我发现问题来自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[]>;

这是正常的。

谢谢。