Как разделить массив на четыре элемента в ngFor?

Question

Как разделить массив на четыре элемента в ngFor?

Как я могу показать здесь 4 проекта вместо одного?

   <div *ngFor="let item of items$ | async">
     // How can I show here 4 projects instead of one?
     {{item}}
    </div>

Answer 1

Вы можете попробовать это (используя трубу среза ): TS:

export class AppComponent  {
  private itemsInRow = 4;
  // dummy array of 14 integers
  private arr = Array.from(Array(14).keys());

  itemInRowRange = Array.from(Array(this.itemsInRow).keys());
  items = of(this.arr);
}

HTML:

<div class="outer" *ngFor="let i of itemInRowRange">
  <div class="box" *ngFor="let item of items | async | slice: i*4 : i*4 + 4">
    {{item}}
  </div>
</div>

STACKBLITZ

Answer 2

компонент:

public items: string[] = [
    "one",
    "twho",
    "three",
    "four",
    "five",
    "six",
    "seven",
    "eight",
    "nine",
    "ten"

]

шаблон:

<div *ngFor="let item of items; let i = index">
  <ng-container *ngIf="i % 4 == 0 || i == 0">
    {{items[i]}}
    {{items[i+1]}}
    {{items[i+2]}}
    {{items[i+3]}}
  </ng-container>
</div>

общая идея - проверить, есть ли индекс текущего элемента внутри массиваВы повторяете это кратно 4

Answer 3

Реструктурируйте массив, который вы используете в компоненте, в массив массивов, каждый из которых содержит 4 элемента.

let items = [ [1, 2, 3, 4], [5,6,7,8] ];

Вот пример того, как вы будете реструктурировать, используя цикл:

const items = [1, 2, 3, 4, 5, 6, 7, 8];
const parentArray = [];
let childArray = [];
items.forEach(item => {
     childArray.push(item);
     if(childArray.length === 4){
          parentArray.push(childArray);
          childArray = [];
     }
});

Затем вложите еще один 'ngFor' внутрь первого в вашем шаблоне:

<div *ngFor=“let item of parentArray”>
    <div *ngFor=“let subItem of item>
        {{ subItem }}
    </div>
</div>

Это не очень элегантное решение, но это то, что вы просите.