Angular插值无法获取订阅数据：问题原因与解决方法

问题原因 #

1. 异步操作时序问题：this.myService.getStatus()是异步请求，subscribe的回调函数会在请求完成后才执行。组件初始化时HTML会先渲染，此时info还是你通过new Information()创建的空实例——如果这个类的a、b属性没有默认值，插值{{ info.a }}自然会显示undefined。
   你构造函数里的第二个console.log(this.info)在subscribe回调之前执行，所以打印undefined，而回调里的console.log是请求完成后才触发，所以能拿到数据。

2. 箭头函数语法错误：你的subscribe回调是多行语句，但没有用花括号包裹，这会导致语法错误，实际this.info = x并没有被正确关联到回调逻辑里，进一步导致info无法被赋值。

解决办法 #

1. 修复箭头函数语法并规范生命周期 #

把请求移到ngOnInit钩子（构造函数仅用于依赖注入），同时用花括号包裹回调逻辑，还要记得在组件销毁时取消订阅防止内存泄漏：

import { Subscription } from 'rxjs';

export class MyComponent implements OnInit, OnDestroy {
    info: Information = new Information();
    private subscription?: Subscription;

    constructor(private myService: MyService) {}

    ngOnInit(): void {
        this.subscription = this.myService.getStatus().subscribe(x => {
            this.info = x;
            console.log(this.info);
        });
    }

    ngOnDestroy(): void {
        this.subscription?.unsubscribe();
    }
}

2. 避免插值时的undefined显示 #

方法一：使用可选链操作符

在HTML中用?.访问属性，当info或对应属性不存在时，不会抛出错误，也不会显示undefined：

<h4>Information</h4>
<p>App Info: <span>{{ info?.a }}</span></p>
<p>More App Info: <span>{{ info?.b }}</span></p>

方法二：初始化默认值

给Information类的属性设置默认值，或者创建实例时直接赋值：

// 方式1：给类属性设默认值
export class Information {
    a: string = '';
    b: string = '';
}

// 方式2：创建实例时赋值
info: Information = { a: '', b: '' } as Information;

3. 推荐使用AsyncPipe（最佳实践） #

直接在模板中使用AsyncPipe，让Angular自动处理Observable的订阅和销毁，无需手动管理，也能彻底规避异步时序问题：

import { Observable } from 'rxjs';

export class MyComponent implements OnInit {
    info$: Observable<Information>;

    constructor(private myService: MyService) {}

    ngOnInit(): void {
        this.info$ = this.myService.getStatus();
    }
}

HTML模板（用*ngIf提前判断，避免可选链）：

<h4>Information</h4>
<div *ngIf="info$ | async as info">
    <p>App Info: <span>{{ info.a }}</span></p>
    <p>More App Info: <span>{{ info.b }}</span></p>
</div>

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