更多

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方法是异步的。这意味着它会发出请求，但不会立即得到回复。

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

这意味着

中的代码

this.bookingService.getAllBookingData().subscribe() //＆lt; - HERE

稍后执行。

所以此行之后的所有代码：

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

执行 BEFORE 传递给订阅方法的函数。

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

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。

Answer 2

由于subscribe funciton正在进行异步调用，因此您需要确保在调用完成后使用数据。

订阅有3个参数/部分。

返回的数据，
如果有任何返回错误，

呼叫已完成部分

 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(error)}, // error

（）=＆GT; //呼叫在这里完成你可以做后跟任务{ console.log（＆＃39;整个加载的dta：＆＃39;，this.bookingFullRowData，＆＃39; row：＆＃39;，this.currentRow）; this.modalService.createModal（＆＃39;＃bookings-form＆＃39;，null，this.dialogOptions）}）; }

Answer 3

您的代码没有等待。请注意以下评论：

// Launch async task in terms of subscribe
this.loadBookingFullRowDataRequest(this.currentRow);

// use loaded data *without waiting*
console.log('the whole loaded dta:', this.bookingFullRowData, 'row: ', this.currentRow);

调用订阅后，您需要使用数据。

更多

使用toPromise，然后与then链接。文档：https://www.learnrxjs.io/operators/utility/topromise.html

角度4数组值丢失

3 个答案:

更多