如何重构此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
    }
}