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屋！