尝试使用ListView和GridLayout复制表格时出现非常奇怪的行为

Question

我想使用ListView复制表格。显示表格的单元格内容工作正常，但是当我添加另一个包装在ListView上方的StackLayout中的GridLayout时，Listview根本不显示......任何想法为什么会发生这种情况？我也尝试使用nsTemplateKey将表头添加到ListView中，但仍然在标题显示但没有表体内容的情况下得到相同的问题。当我删除包含头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> 

Answer 1

尝试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> 
    <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> 
</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>