基于对象属性使用 ngFor 多次重复 HTML 元素答案

【问题标题】：Repeat HTML element multiple times using ngFor based on an object property基于对象属性使用 ngFor 多次重复 HTML 元素
【发布时间】：2019-03-07 04:18:18
【问题描述】：

使用 Angular，我正在创建一个对象，starStructure 基于每个对象的 vote_average。这是我的对象数组的样子：

[
  {"title":"Solo: A Star Wars Story",
   "vote_average":7.1,
   "starStructure":{"full":3,
                    "halfStar":true
                   }
   },
  {"title":"Jurassic World: Fallen Kingdom",
   "vote_average":6.5,
   "starStructure":{"full":3}
  }
]

如何使用*ngFor 重复<i class="material-icons">star</i> 达到starStructure.full 中列出的次数？

我创建了一个StackBlitz for this issue。

【问题讨论】：

标签： angular

【解决方案1】：

返回一个大小数组

arr(size: number) {
  return Array.from(Array(size), (_, i) => i);
}

和 ngFor 在它上面

<i class="material-icons" *ngFor="let i of arr(movie.starStructure.full)">
  star
</i>

https://stackblitz.com/edit/angular-h4wwbh

【讨论】：

在 Angular 中不鼓励从模板调用方法