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

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

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

Answer 2

你可以在里面使用函数,*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 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 开始时，偏移参数很有用。

这种方法的一个巨大优势是这是一个纯管道，这意味着它只会在 item.rank 更改时执行。其他方法可能会在任意页面检查阶段（可能每秒多次）进行虚假更新。

Answer 4

有对象

.TS文件

page = {
  count: 3
}

HTML 文件

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

Answer 5

你可以这样做

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