使用 ngFor 循环并跳过第 n 个元素答案

【问题标题】：Looping using ngFor and skip nth element使用 ngFor 循环并跳过第 n 个元素
【发布时间】：2017-07-11 09:14:24
【问题描述】：

我想知道 angular2 中是否有一种方法可以使用 *ngFor 循环遍历数组或列表并跳过第一个或第 n 个元素

【问题讨论】：

@aloisdg 这并不是真正的重复，因为它要求跳过第一个元素。我一般要求第 n 个元素。答案也大不相同。
确实如此。我的关闭被撤回。（我也会删除这条评论）

【解决方案1】：

<div *ngFor="let item of items; let i=index">
  <div *ngIf="i != n">{{i}} is not n</div>
</div>

【讨论】：

如何跳过每个第 N 个元素，例如每个 3d 或每个 2d？
当然，你可以像*ngIf="i % 3 != 0"一样使用模运算符%developer.mozilla.org/en/docs/Web/JavaScript/Reference/…。 i 仍然会计算它们。您也可以使用管道返回不包含这些元素的数组，然后i 将匹配可见元素的数量，而不是源元素的数量。

【解决方案2】：

我刚刚从另一个问题中学到，你可以用 Slice pipe 来做

 *ngFor="let item of items | slice:1;

1 是您的第 n 个元素

https://angular.io/api/common/SlicePipe

另见： Angular start ngFor index from 1

【讨论】：

*ngFor="let item of items | slice:1（不带逗号）

【解决方案3】：

你可以像这样在循环中使用管道：

html:

<ul>
  <li *ngFor="let element of object | values"> {{element}} </li>
</ul>

在管道元素中，您可以定义要控制的所有内容。
例如在管道组件（values.pipe.ts）中：

@Pipe({ name: 'values' })
export class ValuesPipe implements PipeTransform {
  transform(value, args: string[]): any {
    let values = []
    for (let key in value) {
      values.push(value[key])
    }
    return values
  }
}

【讨论】：