如何使用 Nativescript 在 ListView 中使用索引

Question

我对我的代码有疑问：

我在项目中使用了ListView，代码如下：

<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

我的问题是：如何使用索引？因此，当我单击按钮 (tap)="incrementQty($event)" 时，我只想在一行中增加 Qty，而不是在所有行中。为此，我在 ng-table 索引中声明，但不是函数。你能建议我任何解决方案吗？

Answer 1

我已经为你更新了游乐场here。您已经在页面级别定义了 qty，这就是为什么当您增加或减少 qty 时，它会应用于所有行。 如果您想在每一行中使用 qty，它应该是 dataprovider 的一部分，例如

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 }
    ];

并且在增量上是这样的

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

Answer 2

试试下面的代码

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

在js中使用如下

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