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;
    });
  }

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>

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

感谢。

Answer 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;
    });
  }

然后在你的模板中：

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

这是正常的。

感谢。

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

2 个答案: