Angular/Nativescript:Listview根本不显示 [英] Angular/Nativescript: Listview doesn't show at all

问题描述

我正忙于一个非常基本的Angular2/Nativescript应用程序，在该应用程序中，我试图从Web应用程序中复制表格，并在其中使用Nativescript的GridLayout和ListView显示股票交易...我不确定是否有添加方法ListView中的所有内容，并且没有表头都在ListView中的每个项目中重复，因此我创建了两个GridLayouts，一个位于顶部，一个包含在ListView中...当我单击显示库存交易按钮时， ListView根本不显示.带有标题的GridLayout出现了……我必须在列表视图中做错了什么……我知道哪里出问题了/如何解决这个问题?还有没有办法使用Nativescript调试这些模板错误?如果无法检查正在发生的事情，这将变得非常困难...

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...

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

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";
    }

推荐答案

看起来您需要将let-stockTransaction="item"更改为let-item="item"并将其用作[text]="item.Date"，但是您可能正在使用Angular语法我.

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.

也不应该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根本不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！