Angular如何无需循环直接读取嵌套对象中的城市名称并展示

解决步骤 #

第一步：修正Hall模型类的类型定义 #

你之前把cityid错误定义为string类型，但后端返回的是完整的City对象，修改hall.model.ts：

import { City } from './city.model'; // 引入City模型

export class Hall {
  id?: any;
  name?: string;
  placeqty?: string;
  cityid?: City; // 改为City类型，不要用string
}

第二步：模板中直接访问嵌套属性 #

Angular中可以直接通过.运算符访问对象的嵌套属性，和你想要的PHP$cityid['name']效果完全一致，还可以用?.可选链运算符避免cityid为空时的运行时报错。

会场列表部分修改（删除多余的keyvalue循环）：

<li
  class="list-group-item"
  *ngFor="let hall of Halls; let i = index"
  [class.active]="i == currentIndex"
  (click)="setActiveHall(hall, i)"
>
  {{ hall.name }}
 <br>
 座位数： {{ hall.placeqty }}
  <br>
 <p>城市：{{ hall.cityid?.name }}</p>
  <!-- 删掉原来的keyvalue循环代码 -->
</li>

会场详情部分修改：

把原来的{{ currentHall.cityid }}改为：

<label><strong>城市：</strong></label> {{ currentHall.cityid?.name }}

如果需要同时显示城市id的话，直接加{{ currentHall.cityid?.id }}即可。

原理说明 #

后端返回的cityid本身就是单个对象，不是数组，不需要遍历，直接通过属性名访问即可，你之前出现[object Object]的报错是因为直接输出了整个对象，同时模型类型定义错误也会导致编译阶段的类型提示错误。

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