How to use index in ListView using Nativescript

Question

I have a question about my code:

I used ListView in my project, code like below:

<ListView class="list-group" [items]="countries" (itemTap)="onItemTap($event)"
    style="height:1250px">
    <ng-template let-country="item" let-i="index">
        <FlexboxLayout flexDirection="row" class="list-group-item">
            <Label [text]="country.name" class="list-group-item-heading"
                verticalAlignment="center" style="width: 60%"></Label>
            <Label [text]="country.price" class="list-group-item-heading"
                verticalAlignment="center" style="width: 60%"></Label>
            <Button (tap)="decrementQty($event)" text='-' style="width: 60%">
            </Button>
            <TextField row="1" col="1" class="textfield" [text]="qty"
                editable="false" style="width: 60%">
            </TextField>
            <Button (tap)="incrementQty($event)" text='+' style="width: 60%">
            </Button>
        </FlexboxLayout>
    </ng-template>
</ListView>

Demo

My question is: How to use index? So when I click button (tap)="incrementQty($event)" I want to increment Qty only in one row, not in all rows. For this I declare in ng-table index, but not function. Can you suggest me any solution please?

Do you want to increment a single item in countries list?

Ammar Hussain
– Ammar Hussain

2019-07-18 12:32:00 +00:00
Commented Jul 18, 2019 at 12:32 — Ammar Hussain
– Ammar Hussain, Commented Jul 18, 2019 at 12:32
Yes, increment a single item, not all.

Alon Bi
– Alon Bi

2019-07-18 12:36:24 +00:00
Commented Jul 18, 2019 at 12:36 — Alon Bi
– Alon Bi, Commented Jul 18, 2019 at 12:36

Narendra · Accepted Answer · 2019-07-19 04:32:55Z

1

I have updated the playground for you here. You have defined the qty at page level, that is why when you were incrementing or decremnting the qty , it was getting applied to all rows. If you want to play with qty in each row, it should be part of dataprovider e.g.

countries: { name: string, product_id: string, price: number, qty: number }[] = [
        { name: "Australia", product_id: "1", price: 100, qty: 1 },
        { name: "Belgium", product_id: "2", price: 1009, qty: 1 },
        { name: "Bulgaria", product_id: "3", price: 1008, qty: 1 },
        { name: "Canada", product_id: "4", price: 1006, qty: 1 },
        { name: "Switzerland", product_id: "5", price: 1000, qty: 1 },
        { name: "China", product_id: "6", price: 1011, qty: 1 },
        { name: "Czech Republic", product_id: "7", price: 150, qty: 1 },
        { name: "Germany", product_id: "8", price: 109, qty: 1 },
        { name: "Spain", product_id: "9", price: 10, qty: 16 },
        { name: "Ethiopia", product_id: "10", price: 105, qty: 1 }
    ];

and on increment so omething like this

incrementQty(args: ItemEventData, i) {
        console.log(i);
        // console.log(this.countries[i].qty + 1);
        this.countries[i].qty += 1;
    }

answered Jul 19, 2019 at 4:32

Narendra

4,5842 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alon Bi Over a year ago

I don't want to add new property in my JSON file, because JSON file I get form backend. Thank you!

Narendra Over a year ago

It’s fine even you are getting json from backend, you can add id before aasiging it to list.

Alon Bi Over a year ago

I use (tap)="incrementQty(country.product_id)" but how to use it in function? I can't understand

Narendra Over a year ago

incrementQty(product_id) { for (let i = 0; i < this.countries.length; i++) { if (this.countries[i].product_id == product_id) { this.countries[i].qty += 1; } } }

Ammar Hussain · Accepted Answer · 2019-07-18 12:38:16Z

0

Try the following code

<Button (tap)="incrementQty($event, i)" text='+' style="width: 60%">
</Button>

And in js use the following

function incrementQty($event, i) {
   this.countries[i].qty++;
}

answered Jul 18, 2019 at 12:38

Ammar Hussain

3042 silver badges13 bronze badges

4 Comments

Ammar Hussain Over a year ago

It should work try to use a debugger to see what goes inside incrementQty function on button click

Manoj Over a year ago

@AlonBi Simply pointing it doesn't work won't help any one. If you are facing issues, then share the updated Playground sample to show how you applied this in your code.

Alon Bi Over a year ago

New demo play.nativescript.org/?template=play-ng&id=XkSQ2Z with change code

Alon Bi Over a year ago

Also, I don't want to add new property in my JSON file, because JSON file I get form backend. Thank you!

Collectives™ on Stack Overflow

How to use index in ListView using Nativescript

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related