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

【问题标题】：How to skip the first and the last item in a *ngFor如何跳过 *ngFor 中的第一项和最后一项
【发布时间】：2019-03-03 03:59:44
【问题描述】：

我有一个物品清单。第一行是一种标题。最后一行是一种页脚。我的页眉和页脚需要特殊处理，所以我不想通过这个循环显示。

json:

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

我现在的代码：

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

输出应该是：

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

【问题讨论】：

标签： angular

【解决方案1】：

你可以使用一个好的旧索引：

index:number：当前item在iterable中的索引。

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

【讨论】：

【解决方案2】：

您可以使用闪亮的切片管道：

创建一个新的Array 或String，其中包含元素的子集（切片）。

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

【讨论】：

【解决方案3】：

你可以使用局部变量 first 和 last：

first: boolean: 当该项是可迭代项中的第一项时为真。

last: boolean: 当该项是可迭代项中的最后一项时为真。

<ul>
    <ng-container *ngFor="let item of items; first as isFirst; last as isLast">
        <li *ngIf="!isTrue && !isLast">{{item}}</li>
    </ng-container>
</ul>

【讨论】：