angular：如何循环数字？

Question

我有一个项目集合，其中每个项目都有一个rank属性，这是一个数字。我想循环这个数字，这是我尝试过的：

<div class="col-md-3 col-sm-4 item-container" *ngFor="let item of items">
    <div class="item">
        <p class="rank">
            <img src="" class="img-responsive" *ngFor="let rank of item.rank"/>
        </p>
    </div>
</div>

打字稿：

export class MonthpicksComponent{

    items: Item[] = [];
    //...
}

export class Item{
  id: number;
  name: string;
  img: string;
  desc: string;
  rank: number;
  voters: number;
}

但不幸的是，第一个循环只显示一个结果而第二个循环没有显示任何结果。

Answer 1

您可以在*ngFor中使用函数，因此解决方案应如下所示：

my.component.ts

counter(i: number) {
    return new Array(i);
}

my.component.html

<li *ngFor='let in of counter(5) ;let i = index'>{{i}}</li>

Answer 2

也许最简单的解决方案没有任何TS代码：

<div *ngFor="let item of [].constructor(10); let i = index">
   {{i}}
</div>

Answer 3

你可以这样做

<li *ngFor='let in of [0,1,2,3,4];let i = index'>{{i}}</li>

Answer 4

试试这个

<div class="col-md-3 col-sm-4 item-container" *ngFor="let item of items"> <div class="item"> <p class="rank"> <img src="" class="img-responsive"/>{{item.rank}} </p> </div> </div>

Answer 5

对于您的特定用例，您可以使用以下代码：

HTML：

<div *ngFor="let i of arr(item.rank)"> // arr is declared as Array in our .ts file
   <img src="" class="img-responsive"
</div>

.TS：

export class SomeComponent {
  arr = Array; // declaring arr as Array
}

arr将获取您的rank属性值并创建该长度的数组，然后您可以轻松地循环您的值所代表的次数。

试试这段代码希望它会有所帮助。

Answer 6

最简单的方法是在.ts文件中定义一个数组

i = Array
count : number = 3

您可以动态更改任何功能中的值

在模板中，循环可以包括如下

 <div *ngFor="let j of i(count)">
    // Loop content here
 <div>