Angular遍历含item-前缀键的JSON 拼接索引访问属性的解决方案问询

你遇到的问题本质是recipe.ingredients为对象类型，无法直接用*ngFor按数字索引遍历，以下是三种可直接落地的方案： #

方案1：使用Angular内置KeyValuePipe（最简便） #

Angular 6.0+ 提供了keyvalue管道可以直接遍历对象的键值对，直接在模板中使用即可，自动拿到item-0这类前缀键和对应值：

<ul *ngFor="let entry of recipe.ingredients | keyvalue">
    <li>{{entry.value.amount}}</li>
    <li>{{entry.value.measurement}}</li>
    <li>{{entry.value.item}}</li>
    <!-- 如需获取item-前缀的key，直接取entry.key即可 -->
</ul>

方案2：模板内手动拼接key访问 #

如果确定key的格式固定为item-[索引]，可以直接在模板中拼接字符串作为属性名访问：

<ul *ngFor="let _ of [].constructor(Object.keys(recipe.ingredients).length); let i = index;">
    <li>{{recipe.ingredients['item-'+i].amount}}</li>
    <li>{{recipe.ingredients['item-'+i].measurement}}</li>
    <li>{{recipe.ingredients['item-'+i].item}}</li>
</ul>

方案3：组件TS中提前转换为数组（性能最优） #

推荐在业务逻辑层提前把对象转为数组，避免模板中做多余计算，可维护性更高：

组件TS代码： #

// 在你的组件类中添加转换逻辑
getIngredientsList() {
  return Object.keys(this.recipe.ingredients).map(key => this.recipe.ingredients[key]);
}

模板代码： #

<ul *ngFor="let item of getIngredientsList()">
    <li>{{item.amount}}</li>
    <li>{{item.measurement}}</li>
    <li>{{item.item}}</li>
</ul>

原有代码错误说明 #

你之前的写法{{recipe[i].amount}}错误，因为i是数字索引，要访问的是recipe.ingredients对象下的属性，而非recipe本身的属性，所以需要先定位到ingredients再拼接key访问。

内容的提问来源于stack exchange，提问作者Dujòn Pratt