Angular/Nativescript: Listview doesn't show at all

Question

I am busy with a very basic Angular2/Nativescript app where i'm trying to replicate a table from a web app where I display stock transactions using Nativescript's GridLayout and ListView... i'm not sure there's a way to add all content in the ListView and not have the table headers repeat with in every item in the ListView so i've created two GridLayouts, one at the top and one contained in the ListView... When I click on the show stock transactions button the ListView doesn't show at all. The GridLayout with the headers shows up though... I must be doing something wrong with the listview... Any idea where i'm going wrong/How to fix this? Also is there a way to debug these template errors using Nativescript? It makes it really hard if there's no way to check what's going on...

Update: I updated my code after having a look at the link @Nick Ilive posted and managed to get it working for about 5 minutes... When I re-compiled it just showed the headers twice but no other content...

    my code:

    Part of my xml template:

        <Button class="btn btn-primary m-x-0" text="Show Stock Transactions" (tap)="showStockTransactions()"></Button>


    <StackLayout *ngIf="stockTransactions.length > 0">

        <ListView [items]="stockTransactions" [itemTemplateSelector]="templateSelector" class="list-group" color="green">
            <template nsTemplateKey="header" let-header="item">
            <GridLayout rows="auto" columns="*, *, *, *">
            <Label row="0" col="0" class="list-group-item bg-primary" text="Date"></Label>
            <Label row="0" col="1" class="list-group-item bg-primary" text="name"></Label>
            <Label row="0" col="2" class="list-group-item bg-primary" text="supplier"></Label>
            <Label row="0" col="3" class="list-group-item bg-primary" text="Qty"></Label>
        </GridLayout>
            </template>
            <template nsTemplateKey="cell" let-stockTransaction="item">
                <GridLayout rows="auto" columns="* * * *">
                    <Label row="0" col="0" [text]="stockTransaction.Date" class="list-group-item"></Label>
                    <Label row="0" col="1" [text]="stockTransaction.TransactionType_Name" class="list-group-item"></Label>
                    <Label row="0" col="2" [text]="stockTransaction.SupplierMaster_Name" class="list-group-item"></Label>
                    <Label row="0" col="3" [text]="stockTransaction.Qty" class="list-group-item"></Label>
                </GridLayout>
            </template>

        </ListView>

    </StackLayout>

        my showStockTransactions() function:

        showStockTransactions() {
                this.stockTransactions.push('1 jan 2017', 'nametest', 'abc', '88');
                this.stockTransactions.push('1 jan 2012', 'name', 'abcd', '8');
            }

my rmHeaderModel class:

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

}

And then I instantiate it in the controller as follows:

ngOnInit() {        
        this.stockTransactions = [];
        this.header  = new rmHeaderModel("Date", "Name", "Supplier", "Qty", "header");
    }

my templateSelector function:

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

Answer 1

Looks like you'll need to change let-stockTransaction="item" to let-item="item" and use it as [text]="item.Date", but you may be using Angular syntax that's new to me.

And shouldn't this.stockTransactions.push('1 jan 2017', 'nametest', 'abc', '88'); be:

this.stockTransactions.push({
  Date: '1 jan 2017',
  TransactionType_Name: 'nametest',
  SupplierMaster_Name: 'abc',
  Qty: '88'
});