javascript - Angular 4 数组值丢失

Question

我有一个方法，它将从 http 请求返回的数组分配给另一个数组。问题在于，该方法完成后，包含新值的数组似乎变空。

带有http请求的方法。

loadBookingFullRowDataRequest(rowId: number) {
    this.bookingFullRowData[rowId] = [];
    this.bookingService.getAllBookingData().subscribe(res => {
      this.bookingFullRowData = <Booking[]>res[rowId];
      console.log('all booking data: ', this.bookingFullRowData, 'rowId: ', rowId);
      for (const item of this.bookingFullRowData) {
        const itemId = `${item['title']}-rowid-${item['rowid']}-proj-${item['proj']}`;
        this.bookingsForm.addControl(itemId, new FormControl(
          `${item['content']}`
        ));
      }
    });
  }

尝试使用更新后的数组中的数据的方法。

launchModal(element) {

    const elementId = (event.target as Element).id;
    const elementIdArray = String(elementId).split('-');
    this.currentRow = parseInt(elementIdArray[2], 10);
    this.loadBookingFullRowDataRequest(this.currentRow);
    console.log('the whole loaded dta:', this.bookingFullRowData, 'row: ', this.currentRow);

    this.modalService.createModal('#bookings-form', null, this.dialogOptions);
  }

console.log 仅输出一个空数组。

Answer 1

问题在于 getAllBookingData 方法是异步的。这意味着它发出请求但不会立即得到响应。

我们传递给订阅方法的函数基本上是一个回调函数，在返回响应时执行。

这意味着里面的代码

this.bookingService.getAllBookingData().subscribe()//<-- 这里

在稍后的某个时间点执行。

因此此行之后的所有代码:

this.loadBookingFullRowDataRequest(this.currentRow);
// Any code below here!!
console.log('the whole loaded dta:', this.bookingFullRowData, 'row: ', this.currentRow);

this.modalService.createModal('#bookings-form', null, this.dialogOptions);

在传递到订阅方法的函数之前执行。

因此，要解决您的问题，您需要移动回调函数中检索数据后需要执行的所有代码:

loadBookingFullRowDataRequest(rowId: number) {
    this.bookingFullRowData[rowId] = [];
    this.bookingService.getAllBookingData().subscribe(res => {
      this.bookingFullRowData = <Booking[]>res[rowId];
      console.log('all booking data: ', this.bookingFullRowData, 'rowId: ', rowId);
      for (const item of this.bookingFullRowData) {
        const itemId = `${item['title']}-rowid-${item['rowid']}-proj-${item['proj']}`;
        this.bookingsForm.addControl(itemId, new FormControl(
          `${item['content']}`
        ));
      }
      console.log('the whole loaded dta:', this.bookingFullRowData, 'row: ', this.currentRow);

      this.modalService.createModal('#bookings-form', null, this.dialogOptions);

    });
  }

顺便说一句，不要使用 .toPromise 坚持使用 Observables。