Question

如何根据项目内容更改主p-selectButton组件的背景颜色？

Answer 1

您可以使用ng-template根据按钮的内容绑定动态类。

在component.html

中

<p-selectButton [options]="cities1" [(ngModel)]="selectedCity1">
 <ng-template let-item>
   <button class="ui-button mybtn" [ngClass]="getClass(item)">{{item.label}} 
   </button>
 </ng-template>
</p-selectButton>

在component.ts

中

getClass(item){
 let value = item.value;
 if(value){
    if(value.code === 'NY'){
       return 'red';
     }
     if(value.code === 'RM'){
       return 'pink';
     }
     if(value.code === 'LDN'){
       return 'green';
     }
  }

}

在component.scss中

button.red, button.red:hover{
  background: red;
  border: red;
  }
  button.green, button.green:hover{
     background: green;
     border: green;
  }
  button.pink,button.pink:hover{
     background: pink;
     border: pink;
  }
 .mybtn{
    padding: 5px;
  }

此处已更新

stackblitz

primeng p-selectButton上的背景颜色

1 个答案: