将 primeng 轮播数据显示为 2 行

Question

我正在使用 primeng carousel 来显示 data/items 但要求要求将项目显示为每页 2 个不同的行，每行 5 个项目，然后当我们单击下一步时，我们会看到其他项目第 11 条。我已尝试尽可能多地操纵它，但充其量也没有成功，我在视觉上正确显示了 5 个项目，但是当我设置 [numVisible]="10" 时，它全部聚集成一行。
有谁知道如何使用 primeng 轮播实现此目的？

<p-carousel [value]="laboratori" [numVisible]="10" [numScroll]="5" [responsive]="true"
    *ngIf="step == 0 && laboratori.length != 0">
    <ng-template let-lab pTemplate="item">
      <div class="row">
        <div class="lab-item" style="height: 90%;">
          <div class="card card-shadow" [ngClass]="lab?.nome != laboratorioSelected?.nome? 'tail': 'tailSelected'"
            type="button" (click)="selectLaboratorio(lab)">
            <div class="card-body" style=" align-self: center;">
              <h5 class="card-title mb-0">{{lab?.nome}}</h5>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </p-carousel>

Answer 1

如果您想显示这 10 个项目，然后以相同的方式显示另外 10 个项目，您需要创建一个数组，其中包含一个复杂的项目 object，就像我说的，对于每个项目，你每次循环 10 children。我猜没那么复杂 :) 每个项目只有 10 children.

实际上，如果您仔细查看 fiddle 上的示例，它完全按照我告诉您的方式进行，这意味着它们将项目分组为具有某种“行”：

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4> <h4>2</h4></div>
</div>

项目按 2“分组”。因此，如果您想这样做，只需按照我在您的数据中所说的那样对您的项目进行分组，它看起来像：

data = [
  { obj1: some, obj2: thing },
  { ... }
]

或者你按 10 分组......你的选择真的:)

将 primeng 轮播数据显示为 2 行

Display data of primeng carousel into 2 rows

carousel

primeng

angular