Issues rendering more than one template in a ListView


#1

I am trying to display data in a table-like layout using Nativescript/Angular and getting strange results which doesn’t seem possible to debug, i’m trying to display a ng-template containing headers and the body content below the headers. Is there no way to display a static header row in a ListView without having to bind the header items to the same array as the rest of the ListView? This seems realy complicated/frustrating as I always use Array arrays for lists of items and going about it this way means having to copy the body data from the original array into an Array array and then add the headers (which has a different type) to the same Array array… i’m using tns 3.1.3. My issue is that for some reason only the headers gets displayed. Any idea why the content with nsTemplateKey “cell” is missing?

My XML code:

<StackLayout *ngIf=“showItems”>
<ListView [items]=“listItems” [itemTemplateSelector]=“templateSelector” class=“list-group”>


<Label row=“0” col=“0” class=“list-group-item-heading bg-primary” [text]=“header.item1”>
<Label row=“0” col=“1” class=“list-group-item-heading bg-primary” [text]=“header.item2”>
<Label row=“0” col=“2” class=“list-group-item-heading bg-primary” [text]=“header.item3”>
<Label row=“0” col=“3” class=“list-group-item-heading bg-primary” [text]=“header.item4”>




<Label row=“0” col=“0” textWrap=“true” class=“list-group-item-text” [text]=“ticket.ProductDetail_Name”>
<Label row=“0” col=“1” textWrap=“true” class=“list-group-item-text” [text]=“ticket.BarCodeZ”>
<Label row=“0” col=“2” textWrap=“true” class=“list-group-item-text” [text]=“ticket.Amount”>
<Label row=“0” col=“3” textWrap=“true” class=“list-group-item-text” [text]=“ticket.Qty”>



My itemSelector function and ngOnInit:

templateSelector = (item: any, index: number, items: any) => {
return item.type || “cell”;
}

ngOnInit() {
this.header = new HeaderModel(“Name”, “Barcode-Z”, “Amount”, “Qty”, “header”);
}

my header model:

export class HeaderModel {
constructor(
public item1: string,
public item2: string,
public item3: string,
public item4: string,
public type: string
)
{}

}

I then add my ticket items which are supposed to be rendered in the second template of the ListView/Table and header items to an array array:

this.listItems.push(tempItems);
this.listItems.unshift(this.header);