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

Question

I am trying to display a list of items in a ListView. I added a GridLayout to the template of the ListView and then I add the item name, quantity and a remove (font-awesome trash icon) to the three columns of the GridLayout. It seems to work fine but whenever I add a new item to the list in the view the previous item gets overridden by the most recent. i.e. The list contains only one row which contains the most recent item instead of adding the most recent item below the current in a new GridLayout. Any idea what might be going wrong here? My code is below

<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 = '';  
  }

@mast3rd3mon I just added my code for adding an item. Thanks for taking a look. — user2094257
are you sure res.stocktakedetail is there? and did you remove the scrollview? — mast3rd3mon
Yes i'm sure the component code is working as everything worked fine before. I displayed the info in a StackLayout before and wanted to try using a GridLayout recently... — user2094257

mast3rd3mon mast3rd3mon · Accepted Answer · 2017-05-03T12:10:59

You dont need to have a scrollview around a listview, the listview itself has a scrollview built in. Use this:

<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: When adding a new item to a Listview the previous item gets overridden

1 Answers