Angular中ngOnInit里console.log返回undefined，函数调用可获取数据

问题根源 #

你遇到的问题本质是异步操作的执行顺序问题：

• this.userService.getUserData(id)是HTTP请求，属于异步操作，它不会阻塞后续代码执行。
• ngOnInit里调用getUserData后，立刻执行console.log(this.userData)，这时候HTTP请求还在后台处理，userData还没被赋值，所以输出undefined。
• 按钮点击时，HTTP请求已经完成，userData已经被赋值，所以printData能输出正确数据。

解决方案 #

以下几种方式都能解决这个问题，选适合你项目的即可：

1. 在subscribe回调内调用printData

直接在数据返回并赋值后调用打印函数，确保操作在数据就绪后执行：

public userData!: any;
public userCategory!: any;

ngOnInit(): void {
    this.getUserData(this.userId);
}

getUserData(id: number) {
    this.userService.getUserData(id).subscribe((response) => {
        this.userData = response.data;
        this.userCategory = response.data.UsersCategory;
        this.printData(); // 数据赋值完成后调用
    });
}

printData(){
    console.log(this.userData);
}

2. 使用async/await（将Observable转为Promise）

这种方式让异步代码看起来像同步代码，更易读：

import { firstValueFrom } from 'rxjs'; // Angular 12+推荐用这个替代toPromise

public userData!: any;
public userCategory!: any;

async ngOnInit(): Promise<void> {
    await this.getUserData(this.userId);
    this.printData();
}

async getUserData(id: number): Promise<void> {
    const response = await firstValueFrom(this.userService.getUserData(id));
    this.userData = response.data;
    this.userCategory = response.data.UsersCategory;
}

printData(){
    console.log(this.userData);
}

3. 使用RxJS的tap操作符

如果想保持Observable的链式操作风格，可以用tap在数据流中处理数据赋值和打印：

import { tap } from 'rxjs/operators';

public userData!: any;
public userCategory!: any;

ngOnInit(): void {
    this.getUserData(this.userId).subscribe();
}

getUserData(id: number) {
    return this.userService.getUserData(id).pipe(
        tap((response) => {
            this.userData = response.data;
            this.userCategory = response.data.UsersCategory;
            this.printData();
        })
    );
}

printData(){
    console.log(this.userData);
}

总结 #

核心原则就是：必须等待异步请求完成、数据赋值后，再执行依赖该数据的操作，不能在发起请求后立刻同步执行。

内容的提问来源于stack exchange，提问作者Noé Rivera