Пример нативного сценария angListView `itemSelecting` - PullRequest
Новая
       89

Пример нативного сценария angListView `itemSelecting`

0 голосов
/ 30 мая 2019

Кто-нибудь знает ссылку, которая показывает пример того, как реализовать itemSelecting в Nativescript angular RadListViewhttps://docs.nativescript.org/ns-ui-api-reference/classes/radlistview#itemselecting?

Потому что я не могу найти ни одного примера. Спасибо.

1 Ответ

0 голосов
/ 30 мая 2019

HTML 

<RadListView class="list-group" [items]="countries" selectionBehavior="Press"
    multipleSelection="true" (itemSelecting)="onItemSelecting($event)"
    (itemDeselecting)="onItemSelecting($event)">
    <ng-template let-country="item">
        <FlexboxLayout flexDirection="row" class="list-group-item">
            <Image [src]="country.imageSrc" class="thumb img-circle"></Image>
            <Label [text]="country.name" class="list-group-item-heading"
                verticalAlignment="center" style="width: 60%"></Label>
        </FlexboxLayout>
    </ng-template>
</RadListView>

TS 

import { ListViewEventData } from "nativescript-ui-listview"
import { Component } from "@angular/core";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.css"]
})
export class HomeComponent {
    countries: { name: string, imageSrc: string }[] = [
        { name: "Australia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/au.png" },
        { name: "Belgium", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/be.png" },
        { name: "Bulgaria", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/bg.png" },
        { name: "Canada", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ca.png" },
        { name: "Switzerland", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ch.png" },
        { name: "China", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cn.png" },
        { name: "Czech Republic", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cz.png" },
        { name: "Germany", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/de.png" },
        { name: "Spain", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/es.png" },
        { name: "Ethiopia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/et.png" },
        { name: "Croatia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hr.png" },
        { name: "Hungary", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hu.png" },
        { name: "Italy", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/it.png" },
        { name: "Jamaica", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/jm.png" },
        { name: "Romania", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ro.png" },
        { name: "Russia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ru.png" },
        { name: "United States", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/us.png" },
    ];

    onItemSelecting(args: ListViewEventData): void {
        console.log(args.view.bindingContext.name);
        args.returnValue = args.index > 5;
    }
}

Примечание: Кажется, глючит, по крайней мере, на Android. Второе нажатие не запускает событие itemSelecting и помечает элемент как выбранный. Обходной путь может быть найден в nativescript-ui-feedback / Issues / 181

...