角度：如何循环数字？

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

有对象

TS 文件

page = {
  count: 3
}

HTML 文件

 <div *ngFor="let item of [].constructor( page.count ); let i = index">
   index: {{i}} | other content...
 <div>

Answer 2

试试这个

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

我知道这个问题已经 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;
}

<ul>
  <li *ngxRange="let value from start to end by step">
    Item #{{value}}
  </li>
</ul>

Answer 4

如果您想以规范的 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 5

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

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 6

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

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

Answer 7

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

i = Array
count : number = 3

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

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

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

Answer 8

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

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 9

你可以这样做

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