Angular函数返回undefined问题求助：无法读取cardValue属性

问题根源 #

1. 组件初始化阶段cardDetails就执行了this.custom()，此时returnedData还未通过异步请求赋值，直接访问this.returnedData.cardValue会触发Cannot read properties of undefined错误。
2. 异步请求完成后调用的custom()虽能拿到数据，但cardDetails在初始化时的赋值已固定，不会自动更新。

解决方案 #

方案1：订阅回调中直接更新数据

直接在异步请求的订阅回调里修改cardDetails的cardValue，无需额外函数：

cardDetails = [
    { cardValue: null } // 初始化默认值，避免模板报错
];
returnedData: any;

ngOnInit(): void {
  this.Service.incomingData().subscribe((data: any) => {
    this.returnedData = data;
    console.log('test1', this.returnedData);
    // 数据就绪后更新cardValue
    this.cardDetails[0].cardValue = this.returnedData.cardValue;
  });
}

方案2：保留自定义函数并增加判空逻辑

如果需要保留custom()函数，先判断数据是否就绪，再在订阅回调中更新cardDetails：

cardDetails = [
    { cardValue: null }
];
returnedData: any;

ngOnInit(): void {
  this.Service.incomingData().subscribe((data: any) => {
    this.returnedData = data;
    console.log('test1', this.returnedData);
    this.cardDetails[0].cardValue = this.custom();
  });
} 

custom(): any {
  // 先判空，避免未就绪时报错
  if (!this.returnedData) return null;
  return this.returnedData.cardValue;
}

方案3：使用异步管道（Angular最佳实践）

无需手动管理订阅，利用async管道自动处理异步数据流：
组件代码：

import { Observable } from 'rxjs';

cardData$: Observable<any>;

ngOnInit(): void {
  this.cardData$ = this.Service.incomingData();
}

模板代码：

<div *ngIf="cardData$ | async as cardData">
  <div class="card">
    <p>Name: {{ cardData.cardValue.Name }}</p>
    <p>Size: {{ cardData.cardValue.Size }}</p>
    <p>Age: {{ cardData.cardValue.Age }}</p>
  </div>
</div>

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