Angular13 PrimeNG p-tag组件绑定值空白 报读取undefined的label错误

使用Angular 13版本开发项目时，导航跳转至订单列表页面，页面内除<p-tag>字段外其余所有字段均可正常获取数据并展示，仅<p-tag>字段显示为空白，浏览器控制台抛出如下错误：

Cannot read properties of undefined (reading 'label')

orders-list.component.html #

<ng-template pTemplate="header">
  <tr>
    <th pSortableColumn="dateOrdered">
      Date Ordered <p-sortIcon field="dateOrdered"></p-sortIcon>
    </th>
    <th pSortableColumn="status">Status <p-sortIcon field="status"></p-sortIcon></th>
    <th></th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-order>
  <tr>
    <td>{{ order.dateOrdered | date: 'short' }}</td>
    <td>
      <p-tag
        [value]="orderStatus[order.status].label"
        [severity]="orderStatus[order.status].color"
      ></p-tag>
    </td>
  </tr>
</ng-template>

orders-list.component.ts #

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Order, OrdersService } from '@bluebits/orders';
import { ORDER_STATUS } from '../order.constants';

@Component({
  selector: 'admin-orders-list',
  templateUrl: './orders-list.component.html',
  styles: []
})
export class OrdersListComponent implements OnInit {
  orders: Order[] = [];
  orderStatus = ORDER_STATUS;
  constructor(
    private ordersService: OrdersService,
    private router: Router
  ) {}

  ngOnInit(): void {
    this._getOrders();
  }

  _getOrders() {
    this.ordersService.getOrders().subscribe((orders) => {
      this.orders = orders;
    });
  }
}

orders.constants.ts #

export const ORDER_STATUS = {
  0: {
    label: 'Pending',
    color: 'primary'
  },
  1: {
    label: 'Processed',
    color: 'warning'
  },
  2: {
    label: 'Shipped',
    color: 'warning'
  },
  3: {
    label: 'Delivered',
    color: 'success'
  },
  4: {
    label: 'Failed',
    color: 'danger'
  }
};

orders.service.ts #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Order } from '../models/order';
import { environment } from '@env/environment';

@Injectable({
  providedIn: 'root'
})
export class OrdersService {
  apiURLOrders = environment.apiUrl + 'orders';

  constructor(private http: HttpClient) {}

  getOrders(): Observable<Order[]> {
    return this.http.get<Order[]>(this.apiURLOrders);
  }
}

• 核心原因是类型不匹配导致访问undefined属性：ORDER_STATUS定义的键是数字类型（0/1/2/3/4），但后端接口返回的order.status通常是字符串类型（如"0""3"），JavaScript中对象的数字键和同值字符串键不会自动隐式匹配，此时orderStatus[order.status]返回undefined，再访问.label属性就会抛出类型错误。
• 边界场景未覆盖：如果某条订单数据的status值为null、undefined，或者不在0-4的约定枚举范围内，同样会导致orderStatus[order.status]为undefined，触发报错。
• 模板未做空值保护：直接写链式属性访问，没有对中间可能出现的undefined值做拦截，一旦值不存在就会中断组件渲染。

1. 修复类型匹配问题，同时增加模板空值拦截。修改模板中<p-tag>部分的代码，将status转为数字后再匹配枚举，同时加渲染前置判断：

<p-tag
  *ngIf="order.status != null && orderStatus[+order.status]"
  [value]="orderStatus[+order.status].label"
  [severity]="orderStatus[+order.status].color"
></p-tag>

代码中+order.status是JS原生快速转数字的写法，可将字符串类型的status转为和枚举键一致的数字类型；*ngIf做前置校验，只有status存在、且对应枚举项存在时才渲染标签组件，从根源避免访问undefined属性。

2. （可选优化）抽取公共方法做兜底处理，避免模板中写过多逻辑，同时兼容异常status值。在orders-list.component.ts中添加状态获取方法：

getOrderStatus(status: number | string) {
  const statusKey = Number(status);
  // 枚举匹配失败时返回兜底值，避免报错
  return this.orderStatus[statusKey] || { label: '未知状态', color: 'info' };
}

模板部分简化为：

<p-tag
  [value]="getOrderStatus(order.status).label"
  [severity]="getOrderStatus(order.status).color"
></p-tag>

3. 联调校验后端返回的订单数据，确认所有订单的status字段取值都在0-4的约定枚举范围内，从数据源层面减少异常值。

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