使用 ngFor 循环非数组变量答案

【问题标题】：Looping over a non-array variable with ngFor使用 ngFor 循环非数组变量
【发布时间】：2019-08-22 01:46:56
【问题描述】：

在我的app.component.ts我有一个number 类型的变量，就像这样

somevar: number = 3

我试图在我的app.component.html 中循环它并执行三遍（在这种情况下，因为 somevar 是 3）。

这可能吗，因为变量不是数组，在这种情况下，使用ngIf 指令会很简单。

我尝试了类似下面的方法 - 但这是非常愚蠢的，当然不起作用。

<div *ngFor="let i = somevar; while i > 0; i--">
   <span>+</span>
</div>

【问题讨论】：

我知道它不是完美的解决方案，但您可以创建并清空长度为 somevar 的数组并对其进行迭代，我还检查了 angulars 文档，它说 int 仅适用于可迭代对象
看看How can I use NgFor without creating arrays to generate matrix UI pattern。
@jonathanHeindl 我将这种方法用于另一个类似的场景。只是想知道是否还有其他我不知道的方法。

【解决方案1】：

这是一种在组件类中添加方法或数组变量的方法。它通过重复一个字符somevar 次来创建一个字符串，并将该字符串转换为一个字符数组，可以用ngFor 进行迭代。

<div *ngFor="let item of 'x'.repeat(somevar).split('')">
   <span>+</span>
</div>

请参阅this stackblitz 以获取演示。

【讨论】：