如何在Angular中展示JSON数据内嵌套对象的parent_category.name字段值

方案1：模板直接判断（轻量场景首选） #

直接在模板插值中使用Angular安全导航运算符?.+空值合并运算符??做判断，无需修改TS逻辑，写法简单高效：

<mat-select formControlName="parent_category">
  <mat-option>--</mat-option>
  <mat-option *ngFor="let p_g of mydata" [value]="p_g.id">
    {{ p_g.parent_category?.name ?? p_g.name }}
  </mat-option>
</mat-select>

如果使用的Angular版本较低不支持??运算符，可替换为三元表达式实现相同效果：

{{ p_g.parent_category ? p_g.parent_category.name : p_g.name }}

方案2：TS层预处理数据（复杂场景首选） #

如果后续展示规则可能调整，建议将展示逻辑收敛到TS层处理，视图层只做渲染，逻辑更易维护：
首先在TS文件拿到数据源后做预处理：

// 示例：接口请求获取到数据后格式化
this.mydata = originData.map(item => ({
  ...item,
  // 提前计算好要展示的名称
  displayName: item.parent_category ? item.parent_category.name : item.name
}))

修改模板直接使用预处理好的字段即可：

<mat-select formControlName="parent_category">
  <mat-option>--</mat-option>
  <mat-option *ngFor="let p_g of mydata" [value]="p_g.id">
    {{ p_g.displayName }}
  </mat-option>
</mat-select>

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