选定的项目突出显示带有角和离子

问题描述

现在我有项目列表。从API重试项目。 现在，我需要突出显示“选定项”。当选择页面加载第一项，然后我的选择另一个项目，以便选择本项，第一项的突出显示中移除。

In this Img I selected second item and add border as shows it selected by user.

<!--I share Code-->
<ion-list *ngFor="let item of items">
                    <ion-item >
                       {{item.name}}
                    </ion-item>
 </ion-list>

解决方法

您可以为此使用ngClass。

<ion-list *ngFor="let item of items" (click)="selectItem(item)">
    <ion-item [ngClass]="{'item-selected':item.value === yourSelectedModelValue}">
        {{item.name}}
    </ion-item>
 </ion-list>

在班上。

selectItem (item) {
    this.yourSelectedModelValue = item;
}