如何突出显示离子列表中的所选项目/项目

Question

我有一个在屏幕上填充的项目列表，只是想在列表视图中突出显示所选项目/项目，请帮助

 <ion-list >
  <button ion-item *ngFor="let route of Routes" (click)="selectCP(route)" >
    {{route.Name}}
  </button>  
 </ion-list>

Answer 1

使用Angular条件样式函数。

[class.stylename] =＆＃34;一些会返回true或false的条件语句＆＃34;

示例：

<!-- This will probably go into your SCSS stylesheet -->
<style>
.highlight {
   background-color: #FFFF33 !important;
}
</style>

<!-- In your HTML code -->
 <ion-list >
  <button ion-item [class.highlight]="route == 1" *ngFor="let route of Routes" (click)="selectCP(route)" >
    {{route.Name}}
  </button>  
 </ion-list>

Answer 2

有效！

[class.stylename]="Some conditional statement that will return true or false"

<!-- This will probably go into your SCSS stylesheet -->
<style>
.highlight {
   background-color: #FFFF33 !important;
}
</style>

<!-- In your HTML code -->
 <ion-list >
  <button ion-item [class.highlight]="route.selected" *ngFor="let route of Routes" (click)="selectCP(route)" >
    {{route.Name}}
  </button>  
 </ion-list>

.ts

route.selected = false;
selectCP(route){
   route.selected =! route.selected;  
}