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.
  })