Angular 2を使用して、テンプレート内の1行を複数回複製したい。オブジェクトを繰り返し処理するのは簡単です、*ngFor="#object of objects"
。しかし、for
ループではなく、単純なforeach
ループを実行したいのです。 (擬似コード)のようなもの:
{for i = 0; i < 5; i++}
<li>Something</li>
{endfor}
どのようにこれをしますか?
<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>
index
を使用すれば、両方を同時に実行できます
<div *ngFor="let item of items; let myIndex = index>
{{myIndex}}
</div>
これであなたは両方の長所を得ることができます。
int
をArray
コンストラクタに渡してから、ngFor
を介してそれを繰り返すと、空の配列を指定された数のエントリでインスタンス化できます。
あなたのコンポーネントコードでは:
export class ForLoop {
fakeArray = new Array(12);
}
あなたのテンプレートで:
<ul>
<li *ngFor="let a of fakeArray; let index = index">Something {{ index }}</li>
</ul>
インデックスプロパティは反復数を与えます。
必要なループの長さに応じて、さらに「テンプレート駆動」の解決策になるかもしれません。
<ul>
<li *ngFor="let index of [0,1,2,3,4,5]">
{{ index }}
</li>
</ul>
これを行うより良い方法は、コンポーネント内に偽の配列を作成することです。
コンポーネント内:
fakeArray = new Array(12);
テンプレート:
<ng-container *ngFor = "let n of fakeArray">
MyCONTENT
</ng-container>
queNumMin = 23;
queNumMax= 26;
result = 0;
for (let index = this.queNumMin; index <= this.queNumMax; index++) {
this.result = index
console.log( this.result);
}
範囲の最小数と最大数
もしあなたが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>
_.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>