angular4 html模板迭代和ngIf指令

Question

我正在使用 ngFor 结构指令将一组对象绑定到我的 html 模板，如下所示：

<div *ngFor=let g of groupsList">

g 引用的每个组都包含一个名为 type 的属性。 groupsList 中的元素已经按类型排序。意思是元素 0-10 中的对象应该是 TypeA，11-35 中的元素是 TypeB，等等。但是总对象和每种类型的对象的数量是动态的。

我需要将每个对象的类型与之前的对象进行比较，并根据这两个值是否不同来显示或不显示上面显示的一个不同的 div。

由于 ngFor 指令，在模板中发生了 groupsList 的迭代。因此，我假设我必须在模板中而不是在我的组件中进行比较。

创建几个 ng-containers 并通过两种方式绑定到我的组件中名为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

这是一个示例 html，您可以在其中将一个对象与之前的对象进行比较，并根据比较显示不同的 div。

<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

希望这会有所帮助！