Angular2/Nativescript：新しいアイテムをListviewに追加すると、前のアイテムがオーバーライドされます

Question

ListViewにアイテムのリストを表示しようとしています。 GridLayoutをListViewのテンプレートに追加し、GridLayoutの3つの列に項目名、数量、および削除（フォントの素晴らしいゴミ箱アイコン）を追加します。それはうまくいくようですが、ビューのリストに新しい項目を追加するたびに、直前の項目は最新の項目によって上書きされます。すなわち、リストには、新しいGridLayout内の最新の項目の下に最新の項目を追加するのではなく、最新の項目を含む行が1つだけ含まれています。何がここで間違っているかもしれないか？私のコードは、あなたがリストビュー自体が組み込まscrollviewがあり、リストビューの周りにscrollviewを持っている必要がいけない

<ScrollView> 
    <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> 
</ScrollView> 

my component code for adding an item: 
submitCaptureItem(captureItem: CaptureItemModel) {  
    this.busy = true; 
    this.restService.postCaptureItem(captureItem) 
    .subscribe(
    (res) => { 
     this.busy = false; 
     if (res.ResponseCode !== 0) { 
      this.showError(res.CustomError); 
     } else { 
      this.stockTakeDetailList.unshift(res.StockTakeDetail);  
      this.product = null;   
     } 
    }, 
    (res) => {  
    this.busy = false; 
    this.showError("technical error"); 
     console.log(res); 
    }); 
    this.barcode = ''; 
    this.qty = ''; 
    } 

Answer 1

を下回っているこの使用します。より多くのデータを追加するための

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