Question

我有一个我用ngOnInit方法调用的服务。哪个返回并填充我的数组。然后，我使用第一个数组的结果完全调用另一个服务方法，第一个数组又填充第二个数组。

我的问题是，在渲染我的第二个数组时，我认为它仍然是空的，所以它永远不会呈现在屏幕上。

这是一个简化的例子：

changedBookings: Booking[] = [];
currentBookings: Booking[] = [];

constructor(private bookingService: BookingService) { }

  ngOnInit() {

    //Get all changes then filter
    this.bookingService.getAllHistory()
        .subscribe(
            data => {
                this.changedBookings = (data as any).results
            },
            err => {
                console.log(err);
            },
            () => {
                this.getCurrentBookings();
            })
  }

  getCurrentBookings() {
      for(let i of this.changedBookings) {
          this.bookingService.getRoomBooking(i.date,i.level,i.room)
              .subscribe(
                  data => this.currentBookings.push((data as any).results),
                  err => console.log(err),
                  () => {
                    //shows this array being filled
                    console.log(this.currentBookings);
                  }
              )
      }
  }

<div class="row">

  <div *ngFor="let booking of changedBookings">
    {{booking.date}}
  </div>

  <!--This one never shows-->
  <div *ngFor="let booking of currentBookings">
    {{booking.date}}
  </div>
  
</div>

如何编写此代码，以便在html代码中使用这两个数组。

Answer 1

最终轻松修复。但其他人可能会陷入困境。

getCurrentBookings() {
  for(let i of this.changedBookings) {
      this.bookingService.getRoomBooking(i.date,i.level,i.room)
          .subscribe(
              data => this.currentBookings.push((data as any).results),
              err => console.log(err),
              () => {
                //shows this array being filled
                console.log(this.currentBookings);
              }
          )
  }

}

因为这是循环的，实际上是在每个循环中推送一个对象数组，所以你最终会得到这样的东西：

[ [{}],[{}] ]

很明显

<div *ngFor="let booking of currentBookings">
  {{booking.date}}
</div>

未定义。在不更改任何其他代码的情况下轻松修复如下：

<div *ngFor="let booking of currentBookings">
  {{booking[0].date}}
</div>

延迟的服务呼叫未显示在视图上

1 个答案: