Loop throught arrays from an objetc for a ngtemplate inside a DataView?-CodePudding

I have this model:

export class TrackingProductoTarjeta {
    id:number,
    color:string
}

And i have this model, which consists of 2 arrays of the TrackingProductoTarjeta model:

import { TrackingProductoTarjeta } from "./trackingProductoTarjeta";

export class TrackingProductoTarjetasData {
   tarjeta1: TrackingProductoTarjeta[] = [];
   tarjeta2: TrackingProductoTarjeta[] = [];
}

Now, lets say i have an instance of the "TrackingProductoTarjetasData" model called "tarjetas", with 2 objects inside each of its arrays.

I want to put it inside a primeNG dataview. The problem is i dont know exactly how to do this, i tried this:

 <p-dataView [value]="tarjetas" [paginator]="true" [rows]="10">

                    <ng-template let-tar pTemplate="gridItem">
                        <div *ngFor="let item of tar.tarjeta1">
                            {{item?.color}}
                        </div>
                    </ng-template>
         
                </p-dataView>

What i want to do is have 1 instance of the TrackingProductoTarjetasData moden and make 1 DataView row for tarjeta1 and another for tarjeta2, displaying the content inside of them. Is that possible?

CodePudding user response：

How about this?

// This will be the items we display in the view
targetaElements: TrackingProductoTarjeta[] = [];

set tarjetas(data: TrackingProductoTarjetasData) {
    this.targetaElements = [...data.tarjeta1, ...data.tarjeta2];
}

And I guess your view would be something like this:

 <p-dataView [value]="targetaElements" [paginator]="true" [rows]="10">
    
    <ng-template let-item="tar" pTemplate="gridItem">
        <div>
            {{item?.color}}
        </div>
    </ng-template>
    
</p-dataView>