尝试使用Listview和GridLayout复制表时非常奇怪的行为

时间:2017-05-04 08:02:38

标签: nativescript angular2-nativescript

我正在尝试使用ListView复制表。显示表格的单元格内容工作正常,但是当我在Listview上方添加另一个包含在StackLayout中的GridLayout时,Listview根本没有显示...任何想法为什么会发生这种情况?我也尝试使用nsTemplateKey将表头添加到ListView,但仍然会遇到标题显示但没有表体内容的相同问题。当我删除包含标题的顶部GridLayout时,Listview的内容会因某种原因完美地显示...

my code:

//headers               
<StackLayout class="m-b-10">
<GridLayout rows="*" columns="*, *, *" *ngIf="stockTakeDetailList.length > 0 && !product">
<Label row="0" col="0" text="Name"></Label>
<Label row="0" col="1" text="Qty"></Label>
<Label row="0" col="2" text="Action"></Label>
</GridLayout>
</StackLayout>


//listview containing the table body
<StackLayout *ngIf="stockTakeDetailList.length > 0 && !product">            
<ListView [items]="stockTakeDetailList">                        
<template let-captureItem="item" let-i="index">
<GridLayout rows="*" columns="*, *, *">
<Label row="0" col="0" class="list-group-item" textWrap="true" [text]="captureItem.ProductDetail_Name"></Label>
<Label row="0" col="1" class="list-group-item" [text]="captureItem.Qty"></Label>
<Label row="0" col="2" class="list-group-item font-awesome" text="&#xf1f8;" (tap)="removeCaptureItem(i)"></Label>
</GridLayout>
</template>
</ListView>         
</StackLayout>

1 个答案:

答案 0 :(得分:0)

尝试封装StackLayout中的所有代码:

<StackLayout>
    <StackLayout class="m-b-10">
        <GridLayout rows="*" columns="*, *, *" *ngIf="stockTakeDetailList.length > 0 && !product">
            <Label row="0" col="0" text="Name"></Label>
            <Label row="0" col="1" text="Qty"></Label>
            <Label row="0" col="2" text="Action"></Label>
        </GridLayout>
    </StackLayout>
    <ListView [items]="stockTakeDetailList" *ngIf="stockTakeDetailList.length > 0 && !product">                        
        <template let-captureItem="item" let-i="index">
            <GridLayout rows="*" columns="*, *, *">
                <Label row="0" col="0" class="list-group-item" textWrap="true" [text]="captureItem.ProductDetail_Name"></Label>
                <Label row="0" col="1" class="list-group-item" [text]="captureItem.Qty"></Label>
                <Label row="0" col="2" class="list-group-item font-awesome" text="&#xf1f8;" (tap)="removeCaptureItem(i)"></Label>
            </GridLayout>
        </template>
     </ListView>
</StackLayout>

也许在没有额外堆栈布局的情况下尝试:

dog.name[0]