如何将对象内多组数组装入PrimeNG DataView并按数组分行渲染

实现方案 #

需求完全可以实现，核心问题是你当前的用法不符合PrimeNG DataView的入参要求：p-dataView的[value]属性必须接收数组类型，数组的每一个元素对应DataView的一行，你当前传入的是单个TrackingProductoTarjetasData对象，自然无法按要求渲染两行。

步骤1：调整绑定的数据源 #

你可以直接在组件中把tarjeta1、tarjeta2组装为数组作为DataView的数据源：

// 组件类中新增属性
dataViewRows: TrackingProductoTarjeta[][] = [];

// 拿到tarjetas实例后赋值
this.dataViewRows = [this.tarjetas.tarjeta1, this.tarjetas.tarjeta2];

步骤2：修改DataView模板代码 #

把[value]绑定到上述数组，直接循环每一行的子元素即可：

<p-dataView [value]="dataViewRows" [paginator]="true" [rows]="10" layout="list">
  <ng-template let-rowTarjetas pTemplate="listItem">
    <!-- 每一行对应tarjeta1或tarjeta2的数组，循环渲染内部元素 -->
    <div class="tarjeta-row">
      <span *ngFor="let item of rowTarjetas" class="tarjeta-item">
        {{item?.color}}
      </span>
    </div>
  </ng-template>
</p-dataView>

补充说明 #

如果你不想单独声明新的数组变量，也可以直接在模板内组装数据源，写法如下：

<p-dataView [value]="[tarjetas.tarjeta1, tarjetas.tarjeta2]" [paginator]="true" [rows]="10" layout="list">
  <!-- 模板内容和上述一致 -->
</p-dataView>

如果需要用grid布局也可以，只需要把layout改成grid，pTemplate改成gridItem即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者FranciscoFJM