Angular forEach 循环从 observable 返回的数据(Firebase 驱动)

Question

我有一个来自返回支付对象数组的服务的可观察对象，一旦我订阅了我的可观察对象，我就会执行一个循环来添加数组中每个对象的数量。我遇到的问题是，在第一次加载时，循环没有按照我假设的方式执行是因为数据尚未到达，但是，如果我在可观察对象的主题上触发 .next，它工作正常。

我的组件的功能是这样的:

paymentsSource = new Subject;
payments$ = this.paymentsSource.asObservable();
paymetsData:Payment[] = new Array();
totalPaymentsAmoutn:number = 0;

ngOnInit() {
  this.payments$
    .subscribe(
     (dates:{startDate:number, endDate:number}) => {
     //Here I need to performe some UTC and Locale conversion to dates thet are being passed on          
      };
      //Here I subscribe to my service          
      this.paymentService.getPaymentsByDateRange(dates.startDate, dates.endDate)
       .subscribe(
         payments => {
          this.totalPaymentsAmoutn = 0;
          this.paymetsData = payments;
          this.paymetsData.forEach( payment => {
            this.totalPaymentsAmoutn += payment.amount;
           })
          });      
       });


//this.paymentsStartDate is declear some where else but it does exist previous to this point
this.paymentsSource.next({startDate:this.paymentsStartDate, endDate:this.paymentsStartDate});

}

//This function I can triger manualy on the view
onPaymentDateRangeChanged($event){
  this.paymentsSource.next({startDate:$event.startDate, endDate:$event.endDate});
}

我的服务函数如下所示:

  getPaymentsByDateRange(startDate:number, endDate:number):Observable<Payment[]>{
    let paymentsArray:Payment[] = [];
    this.af.list('/bookings')
      .subscribe(
        (bookings) => {
          for(let booking of bookings){
            if(booking.payments){
              for(let payment of booking.payments){
                //condition for date range
                if(startDate <= payment.date && payment.date <= endDate){
                  payment.booking_key = booking.$key; 
                  paymentsArray.push(payment);
                }
              }
            }
          }
          //Sorting payments cronologicaly
          paymentsArray.sort(function(paymentA, paymentB){
            return paymentA.date - paymentB.date
          });
        }
      );
    return Observable.of(paymentsArray);
  }

当页面加载时，我确实取回了数组并填充了 View ，但是 this.totalPaymentsAmoutn 的值仍然为 0，如果我手动触发该函数，它会返回数组并完美地更新 this.totalPaymentsAmoutn。

我对 Observables 有点陌生，我认为一旦我订阅它，如果发出新数据它应该运行脚本并更新数据，我不明白为什么在第一次加载时不起作用。我真的认为这与无法执行 forEach 循环有关，因为数组仍然是空的，我认为一旦网络套接字连接，后续更新就会足够快地推送？

Answer 1

您的 getPaymentsByDateRange() 方法中存在断开连接。您将在填充之前返回 paymentsArray。

getPaymentsByDateRange(startDate: number, endDate: number): Observable<Payment[]>{
    let paymentsArray: Payment[] = [];
    this.af.list('/bookings')
        .subscribe(...); // asynchronous
    // since this.af.list.subscribe is asynchronous, this returns before that call is finished.
    return Observable.of(paymentsArray);
}

您应该返回 af.list observable 并仅在组件中订阅。如果你需要在组件使用之前对数据进行预处理，你可以使用 rxjs .map 运算符

import 'rxjs/add/operator/map'; // import map operator

getPaymentsByDateRange(startDate: number, endDate: number): Observable<Payment[]>{
    let paymentsArray: Payment[] = []; // you may want to move this inside the map. If you don't you may get duplicates everytime firebase emits the bookings
    return this.af.list('/bookings')
        .map(bookings => {
            for(let booking of bookings){
                if(booking.payments){
                    for(let payment of booking.payments){
                        //condition for date range
                        if(startDate <= payment.date && payment.date <= endDate){
                            payment.booking_key = booking.$key; 
                            paymentsArray.push(payment);
                        }
                    }
                }
            }
            //Sorting payments cronologicaly
            paymentsArray.sort(function(paymentA, paymentB){
                return paymentA.date - paymentB.date
            });
            return paymentsArray;
        });
}

这确保当您订阅此方法时，onNext 回调只会在 af.list observable 发出时触发。

 this.paymentService.getPaymentsByDateRange(dates.startDate, dates.endDate)
     .subscribe(payments => {
         // fires when af.list observable emits
     });