两次调用可观察函数在 Angular 中不起作用

Question

我想导入 excel，我使用 SheetJS 来做到这一点。

  getSheet<T>(fileReader: FileReader, headers: string[], index: number): Observable<T[]> {
return new Observable((observer) => {

  fileReader.onload = ((ev: ProgressEvent): void => {
    let workbook;
   .......

    workbook = XLSX.read(binary, { type: 'binary', cellDates: true, cellStyles: true });

    let getData = XLSX.utils.sheet_to_json<T>(workbook.Sheets[workbook.SheetNames[index]], { header: headers, range: 1 });

    observer.next(getData);

    observer.complete();
  })


});  }

在另一个函数中，我称之为 observable 函数。

getExcel(evt: Event) {
const fileReader = new FileReader();

fileReader.readAsArrayBuffer((<any>evt.target).files[0]);

let getdataA$!: Observable<interfaceA[]>
let getdataB$!: Observable<interfaceB[]>
let getdataC$!: Observable<interfaceC[]>

getdataA$ = this.getSheet(fileReader, this.headerA, 0);

getdataB$ = this.getSheet(fileReader, this.headerB, 1);

getdataC$ = this.getSheet(fileReader, this.headerC, 2);

 const observable = forkJoin({
  getdataA$,
  getdataB$,
  getdataC$,
});

}

我使用 RxJS 操作符，例如 forkJoin,combineLatest

但它不起作用............

有人可以帮我解决这个问题吗？

Answer 1

访问创建的可观察对象之外的变量是不好的。

在这种情况下，您的fileReader 在new Observable(() => ...) 之外，因此文件只能加载一次。

我认为你必须在new Observable(() => ...) 中创建 FileReader 实例，这样每次订阅 observable 对象时，都会创建一个新的 FileReader 实例。

下面的简单示例代码：

getSheet<T>(someFile: File, anotherArguments: any): Observable<T[]> {
  return new Observable(observer => {
    // create a new FileReader instance when every Observable has been created
    const fileReader = new FileReader();

    fileReader.onload = () => {
      observer.next();
      observer.complete();
    }

    fileReader.readAsArrayBuffer(someFile);
  }
}