angular4 html模板迭代和ngIf指令

Question

I am binding an array of objects to my html template using the ngFor structural directive like this:

<div *ngFor=let g of groupsList">

Each group referenced by g contains a property called type. The elements in groupsList are already sorted by type. Meaning objects in elements 0-10 should have TypeA, elements in 11-35 are TypeB, etc. However the number of total objects and objects of each type are dynamic.

I need to compare type of each object to the object that came before it and display or not display a different div within the one shown above dependent upon if those two values differ.

Iteration of groupsList occurs in the template due to the ngFor directive. As such I assume that I have to do this comparison there in the template as well rather than in my component.

Is the right way of doing this to create a couple ng-containers and do two way binding to two variables in my component named something like priorType and currentType?

Updated with short solution :

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

Answer 1

Here's sample html where you can compare an object with it's previous object and show different div based on the comparison.

<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

Hope this helps!