Angular中服务推送对象数据到数组时类型异常问题求助

1. 变量名拼写错误：代码中声明的是filesList，但push操作时误用了fileList?.push，导致数据根本没添加到目标数组里。
2. 异步时序问题：http.get是异步请求，getAllFiles会在请求完成前就返回空数组，所以filesList.length始终为0；另外JS里数组的typeof本来就是object，这是语言特性，但核心问题是数组未被正确填充。
3. 订阅逻辑缺陷：多次调用getFile会让file$多次发射值（包括初始的null），无法保证结果收集的准确性和顺序。

第一步：修正变量名错误 #

把fileList?.push(data)改为filesList.push(data)，确保数据能正确存入目标数组。

第二步：处理异步逻辑（推荐方案） #

HTTP请求是异步的，不能同步返回结果，应该返回Observable让调用方订阅获取最终的文件列表：

优化服务的getFile方法（可选但更合理） #

让getFile直接返回请求的Observable，避免依赖全局BehaviorSubject发射值：

getFile(filename: string): Observable<any> {
  return this.http.get(`/file/${filename}`).pipe(
    catchError(error => {
      // 可根据需求处理错误，比如返回默认值或抛出错误
      return of(error);
    })
  );
}

重写getAllFiles函数 #

用forkJoin并行请求所有文件，一次性获取全部结果：

import { forkJoin } from 'rxjs';

// ...

getAllFiles(): Observable<any[]> {
  // 将每个文件名转为对应的HTTP请求Observable
  const fileObservables = this.activeFilesList.map(fileName => 
    this.fileService.getFile(fileName)
  );
  
  // 并行执行所有请求，全部完成后返回结果数组
  return forkJoin(fileObservables);
}

组件中调用方式 #

this.getAllFiles().subscribe(filesList => {
  console.log(filesList.length); // 正确显示文件数量
  console.log(filesList[0]); // 正常访问数组索引
});

兼容原服务BehaviorSubject的方案（不修改服务时用） #

如果必须保留原服务的BehaviorSubject逻辑，可通过Promise等待所有异步结果：

getAllFiles(): Promise<any[]> {
  return new Promise((resolve) => {
    const filesList: any[] = [];
    const expectedCount = this.activeFilesList.length;
    let receivedCount = 0;

    const subscription = this.fileService.file$.subscribe((data) => {
      if (data && data !== null) {
        filesList.push(data);
        receivedCount++;
        
        // 收到所有结果后结束订阅并返回数组
        if (receivedCount === expectedCount) {
          subscription.unsubscribe();
          resolve(filesList);
        }
      }
    });

    // 触发所有文件请求
    this.activeFilesList.forEach(fileName => {
      this.fileService.getFile(fileName);
    });
  });
}

调用方式 #

this.getAllFiles().then(filesList => {
  console.log(filesList.length);
  console.log(filesList[0]);
});

• JS中数组的typeof确实是object，判断数组应该用Array.isArray(filesList)，而非typeof。
• 异步操作必须通过Observable或Promise处理，不能同步返回异步获取的数据，这是前端异步编程的核心原则。

内容的提问来源于stack exchange，提问作者Pedro Mendes