Как увеличить значение в ngfor angular 6 для каждой третьей итерации

Question

Как увеличить значение для каждой третьей итерации в ngFor.

Я хочу достичь этого в angular ngfor, как это сделать

Я использую массив объектов, как показано ниже, и я зацикливаю tempArr [] с использованием ngFor

  tempArrA = ['item a', 'item b', 'item c', 'item d', 'item e', 'item f', 'item g', 'item h','item i', 'item j', 'item k', 'item l','item m', 'item n', 'item o', 'item p'];
  tempArrB = ['item f', 'item g', 'item h','item i', 'item j'];
  tempArrC = [ 'item j', 'item k', 'item l','item m', 'item n', 'item o', 'item p'];
  tempArr:any = [
    { 
      name: "one",
      items: this.tempArrA
      },
       { 
      name: "two",
      items: this.tempArrB
      },
       { 
      name: "three",
      items: this.tempArrC
      },
      ];

элемент a - 1
элемент b - 1
элемент c - 1

элемент d - - 2
позиция е - 2
позиция f - 2

позиция g - 3
позиция h - 3
позиция i - 3

и тд ....

Answer 1

Вы можете использовать это, используя angular трубу.

. html

<div *ngFor="let data of tempArrA; let i = index">
  {{data | format : i}}
</div>

.pipe

    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
      name: 'format'
    })
    export class FormatPipe implements PipeTransform {
        transform(value: any, args?: any): any {
          let d = Math.floor(args / 3) + 1
          return value + d;
        }
    }

Эта труба примет значение как значение массива и аргумент, который будет индексом. В конвейере переменная инициализируется со значением = 0. Затем проверка index%3 === 0 увеличивает это инициализированное значение на 1 и возвращает путем конкатенации проверяет рабочую ссылку

https://stackblitz.com/edit/angular-snhcfv?embed=1&file=src / app / app.component . html

Answer 2

Обычно в angular вы хотите отобразить данные вашей модели в удобную для просмотра модель, например:

interface MyItemVm {
  value: string;
  viewIndex: number;
}

tempArrAVm: MyItemVm[] = tempArrA.map((value, idx) => ({value, viewIndex: Math.floor(idx / 3) + 1}))

, затем просто l oop it:

<div *ngFor="let itm of tempArrAVm">
  {{itm.value}} -- {{itm.viewIndex}}
</div>

это может быть немного тяжелым для вашего случая использования, но это общее решение для такого рода проблем. Модифицированная версия решения для труб, опубликованная ранее, может работать для вашего конкретного c случая.

Answer 3

Вы можете использовать array.reduce, чтобы превратить ваш плоский массив в двухмерный массив.

component.ts

// simple array for this example
const source = [1, 2, 3, 4, 5, 6];

this.model = source.reduce((arr, current, idx) => {
  const index = Math.floor(idx / 3);
  if (arr.length === index) {
    arr.push([]);
  }

  arr[index].push(current);
  return arr;
}, []);

компонент . html

<ng-container *ngFor="let group of model; let i = index">
  <div *ngFor="let item of group">
    {{item}} -- {{i + 1}}
  </div>
</ng-container>

Этот простой пример преобразует массив длины 6

[ 1, 2, 3, 4, 5, 6 ]

в двумерный массив длины 2:

[
  [ 1, 2, 3 ],
  [ 4, 5, 6 ]
]

Как только ваша модель будет в структуре, которая соответствует вашим потребностям, становится легко использовать внешний индекс в качестве счетчика, который увеличивается на 3. Вы даже можете отобразить внешний индекс на новый объект, если вам нужно сделать больше с ним.

Было бы достаточно просто преобразовать это с помощью вашей модели.

Рабочая демонстрация: https://stackblitz.com/edit/angular-c2hcrz

Как это работает?

Я использую первые 3 параметра функции обратного вызова reduce здесь

(arr, current, idx)

И вызываю reduce с пустым массивом - второй аргумент.

Думайте о reduce как map - он перебирает исходный массив и позволяет вам помещать каждое значение в нужное вам место.

В callbac k:

• arr - это новый массив, который создается и в конечном итоге возвращается.
• current - текущее значение в l oop из исходного массива
• idx - текущий индекс в l oop из исходного массива

Сначала я выясняю, где в новом массиве мы должны добавить текущий индекс, выполнив Math.floor(idx / 3). Это позволяет нам увеличивать целевой индекс на 1 каждый третий прирост исходного массива. Все остальное довольно просто javascript.

С объектами

Использовать это с объектами тривиально. Контент здесь не имеет значения, именно индекс в исходном массиве определяет группировку:

    const source = [
      { name: 'One', id: 1 },
      { name: 'Two', id: 2 },
      { name: 'Three', id: 3 },
      { name: 'Four', id: 4 },
      { name: 'Five', id: 5 },
      { name: 'Six', id: 6 }
    ];

    this.objModel = source.reduce((arr, current, idx) => {
      const index = Math.floor(idx / 3);
      if (arr.length === index) {
        arr.push([]);
      }

      arr[index].push(current);
      return arr;
    }, []);