使用 Angular 和 Ionic 使所选项目突出显示

Question

现在我有了一个项目列表。从 API 开始重试项目。 现在我需要突出显示 Selected Item。当页面加载时，第一个项目被 select 编辑，然后我 select 另一个项目，所以突出显示这个项目并删除第一个项目的突出显示。

在此 Img 中，我 select 编辑了第二个项目并添加了边框，如图所示 select 由用户编辑。

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

Answer 1

您可以为此使用 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>

在你的 class.

里面

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