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

【问题标题】：Make selected item Highlighted with Angular and Ionic使用 Angular 和 Ionic 突出显示所选项目
【发布时间】：2020-12-21 05:46:13
【问题描述】：

现在我有一个项目列表。从 API 重试项目。现在我需要突出显示选定项目。当页面加载时，第一个项目被选中，然后我选择另一个项目，因此突出显示该项目并删除第一个项目的突出显示。

在这张图片中，我选择了第二个项目并添加了一个边框，以显示用户选择的内容。

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

【问题讨论】：

标签： javascript angular typescript ionic-framework highlight

【解决方案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>

在你的班级里。

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

【讨论】：

谢谢！ item.value = name & yourSelectedModelValue 怎么样。
@Pritesh yourSelectedModelValue 这是要进行选择的值
我有子项目，我该如何突出显示它
@Pritesh 相同的逻辑。将ngClass 与另一个范围变量一起使用。