嘗試使用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>