如何在 ngFor (Angular 4) 中使用当前和下一个迭代值答案

【问题标题】：How to use the current and also next iteration value inside a ngFor (Angular 4)如何在 ngFor (Angular 4) 中使用当前和下一个迭代值
【发布时间】：2018-12-06 17:43:45
【问题描述】：

这是我的循环。我需要在一次迭代中使用活动对象以及下一个活动对象。关于如何做到这一点的任何想法？

 *ngFor="let activity of course.activities; let i = index"

谢谢:)

【问题讨论】：

提供Minimal, Complete, and Verifiable example
同意@Vikas。如果你能把它放在上下文中会很有用。
还提供您的course.activities 包含什么
那么你希望在最后一次迭代中显示什么，因为没有下一个元素？

标签： javascript angular ngfor

【解决方案1】：

假设您不希望最后一个元素单独显示

您只需要遍历course.activities.length - 1。那就是排除最后一项，因为它显示为last but one 项的next 项。

public course = {activities : [1,2,3]};

<div *ngFor = "let a of course.activities.slice(1); let i = index">
  {{course.activities[i]}}-- {{course.activities[i+1]}}
</div>

需要循环来获取数组中元素的索引

DEMO

【讨论】：

非常感谢 - 有个主意

【解决方案2】：

我宁愿创建数组的块，然后循环它们，只取 0 和 1。例如，要获取块，您可以使用（可能因您的 rxjs 版本而异）

export function chunk<T>(arr: T[], chunkSize: number): Observable<T[][]> {
  return Observable.from(arr).pipe(bufferCount(chunkSize)).toArray();
}

然后在模板中循环

<div *ngFor="let activity of chunkedActivities | async">
    {{ activity[0] }} - {{ activity[1] }}
</div>

【讨论】：

谢谢你，这样好像也很简单