Angular中如何将函数返回值赋值给变量？我的代码哪里出错了？

核心问题 #

1. number_record方法返回的是Observable，而非直接的数值——HTTP请求是异步操作，Observable是Angular处理异步数据流的方式，不会直接返回结果。
2. subscribe()方法的返回值是Subscription对象（用于取消订阅），不是回调函数里的rest数值，所以find_number_doc的返回类型错误，直接赋值给number_doc必然失败。

修正方案 #

方案1：直接在组件中订阅赋值

调整组件代码，在ngOnInit中直接订阅Observable，在回调里给number_doc赋值：

// 组件TS文件
number_doc: number = 0; // 初始化默认值

ngOnInit() {
  this.service.number_record(this.year).subscribe((rest: number) => {
    this.number_doc = rest;
    console.log('Number find: ' + rest);
  });
}

// 也可保留find_number_doc方法，调整为无返回值：
find_number_doc(year: number): void {
  this.service.number_record(year).subscribe((rest: number) => {
    this.number_doc = rest;
    console.log('Number find: ' + rest);
  });
}

// 调用时直接执行，无需赋值
ngOnInit() {
  this.find_number_doc(this.year);
}

方案2：使用Async管道（推荐，符合Angular最佳实践）

这种方式无需手动管理订阅，Angular会自动处理订阅和取消订阅，避免内存泄漏：

1. 调整组件中number_doc的类型为Observable：

// 组件TS文件
number_doc$: Observable<number>; // 用$后缀区分Observable变量（Angular约定）

ngOnInit() {
  this.number_doc$ = this.service.number_record(this.year);
}

2. 在模板中使用async管道获取数值：

<!-- 组件HTML模板 -->
<p>文档编号：{{ number_doc$ | async }}</p>

额外优化：修正Service的返回类型 #

把Service中的any改为明确的Observable<number>，提升类型安全性：

// Service文件
number_record(year: number): Observable<number> {
  return this.http.get(`${this.url}doc_number/${year}`).pipe(
    map((res) => {
      const resInt = +res;
      console.log('Number record: ' + resInt);
      return resInt;
    })
  );
}

内容的提问来源于stack exchange，提问作者Jose Simão