如何在 Angular 上为每两个项目创建新的 bootstrap 行？

Question

我想在 ngFor 的每 2 个元素上添加行 loop.But 我无法处理它。我有如下所示的 studentNames 数组

studentNames=[
    {
    name:"Jonas",
    age:22,
    number:"1234"
  },
      {
    name:"Mathilda",
    age:25,
    number:"5432"
  },
      {
    name:"Jacob",
    age:20,
    number:"4321"
  },
      {
    name:"Ivan",
    age:23,
    number:"6984"
  },
      {
    name:"Kate",
    age:21,
    number:"3432"
  },
      {
    name:"James",
    age:20,
    number:"4312"
  },
      {
    name:"Sean",
    age:23,
    number:"4321"
  },
      {
    name:"Julia",
    age:23,
    number:"4321"
  },
  ]

这是我尝试过的

<ng-container *ngFor="let item of studentNames;let i=index">
  <div class="row" *ngIf="i%2==0">
    <div class="col md-12">
      {{item.name}}
    </div>
  </div>
</ng-container>

只有当索引不偶数时才会跳过。在这里，我希望如何在下面看到它们（顺序无关紧要，每行 2 x 2）。

Stackblitz 示例：https://stackblitz.com/edit/bootstrap-wpfukz?file=app%2Fapp.component.html

Answer 1

这是一种更“hacky”的方法，但它 HTML-only:

<ng-container *ngFor="let item of studentNames;let i=index">
    <div *ngIf="i%2==0">
        <div class="row">
            <div class="col md-12">
                {{studentNames[i].name}}
            </div>
            <div class="col md-12">
                {{studentNames[i + 1].name}}
            </div>
        </div>
    </div>
</ng-container>

Answer 2

您可以像下面这样尝试。使用 *ngFor 导出值 index 并使用数组的一半长度继续循环

<ng-container *ngFor="let item of studentNames; let j = index;">
  <ng-container *ngIf="j < (studentNames.length / 2)">
    <div class="row">
      <div class="col md-6">
        {{item.name}}
      </div>
      <div class="col md-6">
        {{ studentNames[ j + (studentNames.length / 2) ].name }}
      </div>
    </div>
  </ng-container>
</ng-container>

工作stackblitz

注意：数组长度必须为偶数;)

如何在 Angular 上为每两个项目创建新的 bootstrap 行？

How to create new bootstrap row per two items on Angular?

javascript

html

angular

typescript

ngfor

工作stackblitz