如何跳过* ngFor中的第一项和最后一项

时间:2018-09-27 09:18:14

标签: angular

我有一个物品清单。第一行是一种标题。最后一行是一种页脚。我的页眉和页脚需要特殊处理,因此我不想在此循环中显示。

json:

{
  "items": [1,2,3,4]
}

我现在的代码:

<ul *ngFor="let item in items">
 <li>{{item}}</li>
</ul>

输出应为:

<ul>
 <li>2</li>
 <li>3</li>
</ul>

3 个答案:

答案 0 :(得分:3)

您可以使用良好的旧索引:

  

index:数字:当前项目在可迭代对象中的索引。

<ul>
    <ng-container *ngFor="let item of items; let i=index">
        <li *ngIf="i != 0 && i != items.length-1">{{item}}</li>
    </ng-container>
</ul>

答案 1 :(得分:1)

您可以使用闪亮的切片管:

<ul>
    <li *ngFor="let item of items | slice:1:items.length-1">{{item}}</li>
</ul>

答案 2 :(得分:0)

首先可以使用局部变量:

  
      
  • first:布尔值:当该项是可迭代项中的第一项时为true。
  •   
  • last:布尔值:当该项是可迭代项中的最后一项时为true。
  •   
<ul>
    <ng-container *ngFor="let item of items; let isTrue=true;let isLast=last">
        <li *ngIf="!isTrue && !isLast">{{item}}</li>
    </ng-container>
</ul>