Angular 11中如何正确将Observable返回数组长度赋值给数字变量？

这是Observable异步特性导致的——subscribe里的回调函数是在异步请求完成后才执行的，而你写在subscribe外面的console.log和test调用会先于回调执行，所以此时numberEditing还没被赋值，自然是undefined。

下面是几种可行的解决方式：

方法1：把依赖数据的逻辑放在subscribe回调内 #

这是最直接的处理方式，确保只有在数据返回后才执行需要用到该数据的代码：

editing() {
  this.measureService.getEditing().subscribe(editingProcess => {
    this.numberEditing = editingProcess.length;
    console.log(this.numberEditing); // 此时能拿到正确数值
    this.test(this.numberEditing);   // 正常传递数值
    // 图表初始化、数据更新等逻辑直接写在这里
  });
}

方法2：用async/await配合Promise（适合习惯同步写法的场景） #

将Observable转换为Promise，通过async/await等待数据返回：

async editing() {
  try {
    const editingProcess = await this.measureService.getEditing().toPromise();
    this.numberEditing = editingProcess.length;
    console.log(this.numberEditing);
    this.test(this.numberEditing);
    // 图表相关逻辑写在此处
  } catch (error) {
    // 处理请求失败的情况
    console.error('获取编辑数据失败:', error);
  }
}

注：Angular 11中toPromise()仍可用，后续版本推荐使用firstValueFrom/lastValueFrom，但11版本无需改动。

方法3：用RxJS操作符串联逻辑（更符合RxJS编程风格） #

如果后续还有其他异步操作，推荐用pipe操作符将逻辑串联：

import { tap } from 'rxjs/operators';

editing() {
  this.measureService.getEditing().pipe(
    tap(editingProcess => {
      this.numberEditing = editingProcess.length;
      console.log(this.numberEditing);
      this.test(this.numberEditing);
      // 图表逻辑处理
    })
  ).subscribe();
}

补充：关于数组类型报错的说明 #

你之前把变量声明成[]（固定长度为0的数组类型），但measureService返回的是Measure[]，类型不匹配导致报错。如果需要存储数组，应该声明为：

numberEditing: Measure[] = [];

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