Angular中ngIf访问数组元素时出现Cannot read properties of undefined错误

DevOps 小满

2026-7-24

问题原因

报错Cannot read properties of undefined (reading '0')的核心是**preSelectedPaymentOption在页面渲染时可能未被赋值，或是过滤后得到空数组**，直接访问preSelectedPaymentOption[0]触发了未定义读取错误：

API请求是异步操作，页面初始化时preSelectedPaymentOption还未被赋值，此时它是undefined，取[0]必然报错。
即便API返回数据，filter(option => option.default === 1)可能没匹配到任何结果，导致preSelectedPaymentOption为空数组，preSelectedPaymentOption[0]为undefined，再访问.value同样报错。

解决方案

方案1：添加空值与长度判断

在*ngIf中先确认数组存在且有元素，再判断具体条件：

<div *ngIf="preSelectedPaymentOption && preSelectedPaymentOption.length > 0 && preSelectedPaymentOption[0].value === 3 && totalCartPrice > 380" class="payment-warning">
   <ion-label>
    <h3>注意！</h3>
    <p>Lorem ipsum dolor sit!!!.</p>
  </ion-label>
</div>

方案2：使用可选链操作符（Angular 12+支持）

可选链?.会在属性不存在时直接返回undefined，避免报错，写法更简洁：

<div *ngIf="preSelectedPaymentOption?.[0]?.value === 3 && totalCartPrice > 380" class="payment-warning">
   <ion-label>
    <h3>注意！</h3>
    <p>Lorem ipsum dolor sit!!!.</p>
  </ion-label>
</div>

方案3：初始化默认值

在组件类中提前给preSelectedPaymentOption赋值为空数组，避免初始状态为undefined：

preSelectedPaymentOption: any[] = [];

getPaymentOptions() {
  this.cartService.getPaymenyOptions().subscribe(
    data => {
      this.paymentData = data;
      this.preSelectedPaymentOption = this.paymentData.payments.filter(option => option.default === 1);
      console.log('Preselected payment method: ', this.preSelectedPaymentOption);
    }, error => {
      console.log('Error', error);
    });
}