angular - 如何从 Observable 返回一个数组

Question

你好，我有一个应该返回数组的函数，在下面的函数中，this.cordovaFile.readAsArrayBuffer(this.cordovaFile.dataDirectory, storageId) 实际上返回一个 Promise 数组，我正在将它转换成Observable 并存储到 timesheetArray 变量中，现在 timesheetArray 它将返回 Observable 数组，但我只想返回一个数组。下面是代码

请帮忙，如果它只返回一个数组，我不需要在任何地方更改它，因为这个函数在整个应用程序中使用

public getAllTimesheets(): TimesheetModel[] {
  const storageId = TIMESHEET_KEYS.ALL_TIMESHEET;

  const timesheetArray = from(
    this.cordovaFile
    .readAsArrayBuffer(this.cordovaFile.dataDirectory, storageId)
    .then((compressedTimesheet) => {
      const start = moment();
      const uint8array = new Uint8Array(compressedTimesheet);
      const jsonTimeSheet = this.LZString.decompressFromUint8Array(uint8array);
      this.log.debug(`LocalStorageMaterialService: getMaterials() from files: Decompression took ${moment().subtract(start.valueOf()).valueOf()} ms`);
      return <TimesheetModel[] > JSON.parse(jsonTimeSheet) || [];
    })
    .catch((error) => {
      this.log.debug('LocalStorageMaterialService: Retrieving materials from file storage was not possible: ', JSON.stringify(error));
      return [];
    })
  )
  timesheetArray.subscribe((timesheet) => {
    // here how to return an Array ??
  });
}

还有一个例子，为什么我想返回一个数组但不可见

let matchedTimesheet = _.find<TimesheetModel>(this.getAllTimesheets() ,
(timesheet) => travelToDate 
&& timesheet.startOfWork.isSame(travelToDate.startDate.value, 'days')
            ); ```

here in the above code it is expecting an array but not Observable., I can do it by subscribing here also , but if the function returns an array instead of  observable, then i need to change everywhere

Answer 1

我认为您的思考方向不正确。 readAsArrayBuffer是一个异步调用。因此它返回一个 promise 。

你不应该简单地返回一个 TimesheetModel[]来自你的 getAllTimesheets()方法。

相反，您应该返回 Observable<TimesheetModel[]> .但是无论你在哪里调用这个getAllTimesheets()，你都必须做一个小的改变。方法。

因为它返回一个 Observable<TimesheetModel[]> , 你必须 subscribe至 getAllTimesheets()在所有这些地方。或者你必须阅读这个 Observable在你的模板中使用 async管道。

我推荐后者。

因此，请对您的 getAllTimesheets() 进行以下更改方法。

public getAllTimesheets(): Observable<TimesheetModel[]> {
  const storageId = TIMESHEET_KEYS.ALL_TIMESHEET;
  return from(
    this.cordovaFile
    .readAsArrayBuffer(this.cordovaFile.dataDirectory, storageId)
    .then((compressedTimesheet) => {
      const start = moment();
      const uint8array = new Uint8Array(compressedTimesheet);
      const jsonTimeSheet = this.LZString.decompressFromUint8Array(uint8array);
      this.log.debug(`LocalStorageMaterialService: getMaterials() from files: Decompression took ${moment().subtract(start.valueOf()).valueOf()} ms`);
      return <TimesheetModel[] > JSON.parse(jsonTimeSheet) || [];
    })
    .catch((error) => {
      this.log.debug('LocalStorageMaterialService: Retrieving materials from file storage was not possible: ', JSON.stringify(error));
      return [];
    })
  );
}

然后无论你在哪里使用它，如果你是 subscribe对它:

// unsubscribe this subscription on ngOnDestroy()
const subscription = getAllTimesheets()
  .subscribe(timesheetData => {
    // Here you'll get that data.
  })