angular4 HTMLテンプレートの反復とngIfディレクティブ

Question

私はこのようなngFor構造ディレクティブを使用して、私のHTMLテンプレートにオブジェクトの配列を結合しています：

<div *ngFor=let g of groupsList"> 

グラムによって参照される各グループは型と呼ばれるプロパティが含まれています。 groupsListの要素は、すでに型別にソートされています。要素0-10の意味オブジェクトはTypeAを持ち、要素11-35はTypeBなどである必要があります。ただし、各オブジェクトのオブジェクトとオブジェクトの数は動的です。

各オブジェクトのタイプをそれ以前のオブジェクトと比較し、その2つの値が異なるかどうかに応じて、上に表示されている別のdivを表示または非表示にする必要があります。

ngForディレクティブのためテンプレートにgroupsListの繰り返しが発生します。私は、私のコンポーネントではなく、テンプレート内でこの比較を行う必要があると私は仮定しています。

いくつかのng-containersを作成し、コンポーネントの2つの変数にpriorTypeとcurrentTypeのような名前を付けてバインドするには、これを行う正しい方法はありますか？短いソリューションで更新

：

<div *ngFor="let g of groupsList; let i=index"> 
<div *ngIf="(i==0) || (i>0 && g.type != groupsList[i-1].type)"> 

Answer 1

ここでは、それは前のオブジェクトだとオブジェクトを比較し、比較に基づいてdiv異なるを示すことができるサンプルHTMLです。

<div *ngFor="let g of groupsList; let i = index"> 
    <div *ngIf="i == 0"> 
     {{ g | json }} 
    </div> 
    <div *ngIf="i > 0 "> 
     {{ g | json }} 
     <h4 *ngIf="(groupsList[i].type != groupsList[i-1].type)" style="background: green">Type doesn't match with previous</h4> 
     <h4 *ngIf="(groupsList[i].type == groupsList[i-1].type)" style="background: red">Type matches with previous</h4> 
    </div> 
</div> 

demo

この情報がお役に立てば幸い！