Как перефакторинг этого NativeScript простой обмен изображениями CSS

Question

У меня есть страница, которая отображает 3 изображения, и пользователь должен нажать на одно, а затем нажать кнопку Далее, чтобы продолжить.

В общем, я просто добавляю немного CSS к изображению при его нажатии.

НО ... мой код некрасив и не отслеживает, выбрал ли он УЖЕ один.

 onPlanTap: function (args) {
        const planImage = args.object;
        const planImageSrc = planImage.src;
        const planId = plan.id;

        this.set("nextButtonOn", true);

        var n = planImageSrc.search("off");

        // Found, it is off - turn on
        if (n > 0) {
            var newOnSrc = planId + "-off.png";
            planImage.src = newOnSrc;
            this.set("currentPlan",planId);
            FancyAlertService.showFancySuccess("Plan Secected!", "You have chosen the FREE plan.", "Ok");
        }
        else {
            // It's already on, turn off
            var newOnSrc = planId + "-on.png";
            planImage.src = newOnSrc;
            this.set("currentPlan","");
        }

    }

[о, я добавляю css, просто добавляет толстую белую рамку к изображению]

Я не могу понять, как выбрать только один.

Есть ли какая-то функция "переключения" в NS, которую я пропускаю, или мне придется самому писать логику?Если это так, кто-нибудь может подсказать мне какой-нибудь код?

Answer 1

Оберните ваши изображения в некоторый пользовательский объект.

class MyImage {

image;
isSelected:boolean;
}

Добавьте привязку данных:

<ListView [items]="myDataItems" class="list-group">
    <ng-template let-item="item" let-i="index">
        <Image (tap)="selectImage(item)" class="item.isSelected ? styleA : styleB"></Image>
    </ng-template>
</ListView>

И в файле компонента:

class MyComponent {
    myDataItems: Array<MyImage>

    selectImage(item: MyImage) {
        //deselect all Items
        //select this item
    }
}