Angular2/Nativescript：将新项目添加到列表视图时，先前的项目将被覆盖

Question

我正在尝试在 ListView 中显示项目列表。我将 GridLayout 添加到 ListView 的模板，然后将项目名称、数量和删除（字体超棒的垃圾图标）添加到 GridLayout 的三列。它似乎工作正常，但每当我将新项目添加到视图中的列表时，前一个项目就会被最近的项目覆盖。即列表仅包含一行，其中包含最新的项目，而不是在新的 GridLayout 中将最新的项目添加到当前项目的下方。知道这里可能出了什么问题吗？我的代码如下

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

Angular2/Nativescript：将新项目添加到列表视图时，先前的项目将被覆盖

Angular2/Nativescript: When adding a new item to a Listview the previous item gets overridden

nativescript

angular2-nativescript