如何从NativeScript中的ListView点击事件获取特定的列表项

Question

I'm trying to get data from a tap event using angular2 + typescript:

this is the component HTML:

<RadListView row="1" [items]="groceryList" [class.visible]="listLoaded" (tap)="seeItem($event)"
    swipeActions="true" (itemSwipeProgressStarted)="onSwipeCellStarted($event)">

    <ng-template let-item="item">
        <Label [text]="item.name" class="p-15 list-item"></Label>
    </ng-template>

    <GridLayout *tkListItemSwipeTemplate columns="*, auto">
        <StackLayout id="delete-view" col="1" (tap)="delete($event)" class="delete-view">
            <Image src="~/images/delete.png"></Image>
        </StackLayout>
    </GridLayout>
</RadListView>

This is the component code:

seeItem(args: ListViewEventData) {
    console.log('item ', <Grocery>args.object.bindingContext);
    console.log('in case');
}

When I tap an element from my ListView I get the console.log:

[Eric Guzmán’s iPhone]: item undefined
[Eric Guzmán’s iPhone]: in case

The "delete" event (in this component) works using the same logic, when tap:

delete(args: ListViewEventData) {
        let grocery = <Grocery>args.object.bindingContext;
        this.groceryService.delete(grocery.id)
            .subscribe(() => {
                let index = this.groceryList.indexOf(grocery);
                this.groceryList.splice(index, 1);
            });
    }

I'm a beginner in NativeScript and I would appreciate the help,

Answer 1

If you are expecting to get the item on tap, here are the changes you need to make

replace

<ng-template let-item="item">
        <Label [text]="item.name" class="p-15 list-item"></Label>
</ng-template>

with

<ng-template let-item="item">
        <Label [text]="item.name" (tap)="seeItem(item)" class="p-15 list-item"></Label>
</ng-template>

And make the changes in the function

seeItem(item: Grocery) {
    console.log('item ', item);
    console.log('in case');
}

Try this it should work.