Question

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

<div *ngFor=let g of groupsList">

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

我需要将每个对象的类型与之前的对象进行比较，并在上面显示的对象中显示或不显示不同的div，具体取决于这两个值是否不同。

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

这样做的正确方法是创建几个ng-container并对我的组件中的两个变量进行双向绑定，这些变量的名称类似于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

希望这有帮助！

angular4 html模板迭代和ngIf指令

1 个答案: