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

如果要以规范的Angular方式实现此功能，则可以创建一个range管道来当场生成数组。

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'range'
})
export class RangePipe implements PipeTransform {
  transform(length: number, offset: number = 0): number[] {
    if (!length) {
      return [];
    }
    const array = [];
    for (let n = 0; n < length; ++n) {
      array.push(offset + n);
    }
    return array;
  }
}

然后您将在这样的模板中使用它：

<ul>
  <li *ngFor="let n of item.rank | range">
    <img src="star.png">
  </li>
</ul>

当您不希望数组从0开始时，offset参数很有用。

此方法的一个很大的好处是，这是一个纯管道，这意味着仅当item.rank更改时才执行。其他方法可能会在任意页面检查阶段（每秒可能多次）进行虚假更新。

Answer 4

你可以这样做

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

Answer 5

试试这个

<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 6

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

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 7

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

i = Array
count : number = 3

您可以在任何函数中动态更改值

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

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

Answer 8

我不得不打破循环，所以我遵循以下方法。这只是另一种选择。

我不知道它是否有用，还是仍然共享那段代码。

如Gunter所述：

没有办法破坏ngFor。

<div *ngFor="let business of businessList; let i = index">
    <div *ngIf="i < 2">
        <span class="bold gray"> {{ business.name }}</span>
        <p class="small light-gray">{{ business.details }}</p>
    </div>
</div>

Answer 9

我知道这个问题已有3年历史了，已经回答了，但是我有类似的需求，我对如何解决这个问题并不完全满意。因此，我创建了一个专用的结构指令来处理这些情况。

我发布了ngx-range，可让您编写如下内容：

当然，每个值都可以是变量，例如

<ul>
  <li *ngxRange="let value from 0 to 20 by 5">
    Item #{{value}}
  </li>
</ul>

export class AppComponent {
  start = 0;
  end = 5;
  step = 1;
}

angular：如何循环数字？

9 个答案: