Angular 2: Как написать цикл for, а не цикл foreach

Используя Angular 2, я хочу дублировать строку в шаблоне несколько раз. Итерация по объекту проста, *ngFor="#object of objects". Тем не менее, я хочу запустить простой цикл for, а не цикл foreach. Что-то вроде (псевдокод):

{for i = 0; i < 5; i++}
  <li>Something</li>
{endfor}

Как мне это сделать?

Ответы

Ответ 1

Обновление

NgFor API устарел, используйте его с комбинацией директивы ngForOf с ng-template.

<ul>
    <ng-template ngFor let-item [ngForOf]="createRange(5)" let-currentElementIndex="(index + 1)" [ngForTrackBy]="trackByFn">
      {{currentElementIndex}} Something
    </ng-template>
</ul>

Демо здесь

Вы можете динамически генерировать массив любого времени, которое вы хотели бы сделать <li>Something</li>, а затем сделать ngFor над этой коллекцией. Также вы можете использовать index текущего элемента.

Разметка

<ul>
   <li *ngFor="let item of createRange(5); let currentElementIndex=index+1">
      {{currentElementIndex}} Something
   </li>
</ul>

код

createRange(number){
  var items: number[] = [];
  for(var i = 1; i <= number; i++){
     items.push(i);
  }
  return items;
}

Демо здесь

Ответ 2

Вы можете сделать оба в одном, если вы используете index

<div *ngFor="let item of items; let myIndex = index>
  {{myIndex}}
</div>

С этим вы можете получить лучшее из обоих миров.

Ответ 3

Вы можете создать пустой массив с заданным количеством записей, если передать конструктор int в конструктор Array, а затем перебрать его через ngFor.

В коде компонента:

export class ForLoop {
  fakeArray = new Array(12);
}

В шаблоне

<ul>
  <li *ngFor="let a of fakeArray; let index = index">Something {{ index }}</li>
</ul>

Свойства индекса дают вам номер итерации.

Текущая версия

Ответ 4

В зависимости от длины запрошенного цикла возможно даже более "управляемое шаблонами" решение:

<ul>
  <li *ngFor="let index of [0,1,2,3,4,5]">
    {{ index }}
  </li>
</ul>

Ответ 5

Лучший способ сделать это - создать поддельный массив в компоненте:

В компоненте:
fakeArray = new Array(12);

InTemplate:

<ng-container *ngFor = "let n of fakeArray"> MyCONTENT </ng-container>

Plunkr здесь