如何在 angular 中迭代同一容器内的卡片

Question

我有这个 JSON 对象：

data=[
  {
    id:1,
    name:'Alex'
  },
  {
    id:2,
    name:'John'
  },
  {
    id:3,
    name:'Sam'
  },
  {
    id:4,
    name:'Top'
  },{
    id:5,
    name:'Jose'
  }
,
{
    id:6,
    name:'Malan'
  }
,
{
    id:7,
    name:'Jo'
  }
]

我想迭代并连续打印每个名称。每行 2 项。

预期结果

// first two names
<div>
  name:'Alex'
  name:'John'

</div>

// second two names
<div>
  name:'Sam'
  name:'Top'

</div>

我想在同一个容器中打印每两个名字。如何使用 *ngFor.

实现此目的

Answer 1

如何对数据进行分组并使用 2 级 ngfor 循环？

const data=[{id:1, name:'Alex'},{id:2,name:'John'},{id:3,name:'Sam'},{id:4,name:'Top'},{id:5,name:'Jose'},{id:6,name:'Malan'},{id:7,name:'Jo'}]

let result = []
data.forEach((d,i) =>{
  i%2 == 0 && result.push([]);
  result[result.length-1].push(d)
  }
)
console.log(result)

这将导致分组 json;

然后在第一个循环中添加另一个循环

Answer 2

您可以使用 here 中的数组块函数并在 Angular 中实现管道。

chunk-array.pipe.ts

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

@Pipe({
  name: 'chunkArray',
  pure: true,
})
export class ChunkArrayPipe implements PipeTransform {
  // credit: 
  transform(array: any, chunkSize: number, property?: string): any {
    return Array(Math.ceil(array.length / chunkSize))
      .fill(null)
      .map((_, index) => index * chunkSize)
      .map((begin) =>
        array
          .map((item: any) => (!!property ? item[property] : item))
          .slice(begin, begin + chunkSize)
      );
  }
}

并在模板中使用它

<ng-container *ngFor="let item of data | chunkArray: 2:'name'">
  <div>
    <ng-container *ngFor="let name of item">
      Name: {{ name }} <br />
    </ng-container>
  </div>
  <hr />
</ng-container>

工作示例：Stackblitz

如何在 angular 中迭代同一容器内的卡片

How to iterate cards within same container in angular

angular

ngfor