web-dev-qa-db-ja.com

Angular 2：foreachループではなくforループを書く方法

Angular 2を使用して、テンプレート内の1行を複数回複製したい。オブジェクトを繰り返し処理するのは簡単です、*ngFor="#object of objects"。しかし、forループではなく、単純なforeachループを実行したいのです。 （擬似コード）のようなもの：

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

どのようにこれをしますか？

angularangular2-template
52
ebakunin

<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;
}

デモはこちら

ボンネットの下で、この*ngFor構文をng-templateバージョンに角張っていました。

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

indexを使用すれば、両方を同時に実行できます

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

これであなたは両方の長所を得ることができます。

30
TGH

intをArrayコンストラクタに渡してから、ngForを介してそれを繰り返すと、空の配列を指定された数のエントリでインスタンス化できます。

あなたのコンポーネントコードでは：

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

あなたのテンプレートで：

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

インデックスプロパティは反復数を与えます。

ライブ版

21
Sbats

必要なループの長さに応じて、さらに「テンプレート駆動」の解決策になるかもしれません。

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

これを行うより良い方法は、コンポーネント内に偽の配列を作成することです。

コンポーネント内：

fakeArray = new Array(12);

テンプレート：

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

ここでPlunkr

3
Deepak Sharma
   queNumMin = 23;
   queNumMax= 26;
   result = 0;
for (let index = this.queNumMin; index <= this.queNumMax; index++) {
         this.result = index
         console.log( this.result);
     }

範囲の最小数と最大数

0
raj bluecloud

もしあなたがi番目のtermのオブジェクトを使い、それを各反復で他の要素に入力したいのであれば：

<table class="table table-striped table-hover">
  <tr>
    <th> Blogs </th>
  </tr>
  <tr *ngFor="let blogEl of blogs">
    <app-blog-item [blog]="blogEl"> </app-blog-item>
  </tr>
</table>
0
Ayush Lal Shrestha

_.range([optional] start, end)を使うことができます。開始（包括的）から終了（排他的）までの数字の間隔を含む新しい縮小リストを作成します。ここではlodash.js ._range()メソッドを使用しています。

例：

CODE

var dayOfMonth = _.range(1,32);  // It creates a new list from 1 to 31.

// HTMLこれで、Forループで使用できます

<div *ngFor="let day of dayOfMonth">{{day}}</div>
0
Ajay Gupta