Question

我正在忙于一个非常基本的Angular2 / Nativescript应用程序，我试图从一个Web应用程序复制一个表格，在那里我使用Nativescript的GridLayout和ListView来显示股票交易... i＆＃39;我不确定是否有一种方法可以在ListView中添加所有内容，而不是在ListView的每个项目中都重复使用表头，所以我创建了两个GridLayout，一个在顶部，一个包含在ListView中...当我点击show stock transactions按钮时，ListView根本没有显示。带有标题的GridLayout显示出来......我必须对listview做错了...任何想法我哪里出错/如何解决这个问题？还有一种方法可以使用Nativescript调试这些模板错误吗？如果没有办法检查发生了什么，那就太难了......

更新：我看了@Nick Ilive发布的链接后更新了我的代码并设法让它工作了大约5分钟...当我重新编译它时只显示了两次但没有其他内容的标题..

    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

您似乎需要将let-stockTransaction="item"更改为let-item="item"并将其用作[text]="item.Date"，但您可能正在使用对我来说不熟悉的Angular语法。

不应该this.stockTransactions.push('1 jan 2017', 'nametest', 'abc', '88');：

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

Angular / Nativescript：Listview根本没有显示

1 个答案: