Angular 9中使用*ngFor显示对象键与对应数组值的实现问题

解决方案 #

Angular的*ngFor默认仅支持遍历数组，你提供的数据源中cars是对象类型，需要通过以下两种方式调整实现需求：

方法1：使用Angular内置KeyValuePipe（推荐，适配Angular 6+版本） #

直接修改HTML模板代码即可：

<strong>Plate and year</strong>
<div *ngFor="let carItem of lists.cars | keyvalue">
  {{carItem.key}}- {{carItem.value.join(', ')}}.
</div>

代码说明：

• keyvalue管道会自动将对象转换为包含key、value属性的数组，其中key对应车牌号，value对应年份数组
• join(', ')方法会将年份数组按逗号+空格的格式拼接为字符串，匹配展示要求
  如果需要固定车牌号的排序顺序，可在组件TS文件中添加排序函数：

// 写入组件class内部
sortByPlate = (a: {key: string}, b: {key: string}) => a.key.localeCompare(b.key);

模板中调整管道参数即可：

<div *ngFor="let carItem of lists.cars | keyvalue:sortByPlate">

方法2：组件TS层预先处理数据 #

如果不想在模板中使用管道，可先在TS层将对象转换为数组再遍历：

// 组件初始化时处理数据
processedCarList = Object.entries(this.lists.cars).map(([plate, years]) => ({
  plate,
  years
}));

对应模板代码：

<strong>Plate and year</strong>
<div *ngFor="let car of processedCarList">
  {{car.plate}}- {{car.years.join(', ')}}.
</div>

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