Как использовать текущее и следующее значение итерации внутри ngFor (Angular 4)

Question

Это цикл, который у меня есть. Мне нужно использовать объект действия, а также следующий объект действия в одной итерации. Есть мысли о том, как это сделать?

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

Спасибо:)

Answer 1

Я бы лучше создал куски вашего массива, затем зациклил их и просто взял 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>

Answer 2

Предполагая, что вы не хотите, чтобы последний элемент отображался отдельно

Вы должны проходить только через course.activities.length - 1. Это исключает последний элемент, поскольку он отображается как элемент next элемента last but one.

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