Angular Material 中的条件按钮颜色属性（组件）

Question

我有一个接受输入的组件.. @Input() coDeliveryCandidates: DeliverySlotView[];

这是在模板中使用的：

<ng-container *ngFor="let coDeliverySlotView of (coDeliveryCandidates | async)">
  <button
    mat-raised-button
    [color]=""
  >
    {{ label  }}
  </button>
</ng-container>

color 属性接受一个字符串作为值，我想做类似的事情：

[color]="{
  black: coDeliverySlotView.slotId === bookedSlot.slotId,
  grey: !coDeliverySlotView.slotId === bookedSlot.slotId
}"

这里我使用了与 ngClass 相同的语法，但我猜它不支持这种方式.. 那么还有哪些其他类似的方式呢？ :)

Answer 1

可以只使用三元运算符

[color]="coDeliverySlotView.slotId === bookedSlot.slotId ? 'black' : 'grey'"

Answer 2

material 设计内置了三种颜色，分别称为 primary、accent、warn 和 base，你传递给 color 的值将设置需要 class ，在这种情况下，更改颜色的简单方法颜色定义为 class 没有设置颜色属性

style.scss

.black {
  &.mat-raised-button.mat-button-base {
    background: black ;
    color:#fff ;
  }
}

.gray {
  &.mat-raised-button.mat-button-base {
    background: #ccc ;
    color:#555 ;
  }
}
.orange {
  &.mat-raised-button.mat-button-base {
    background: orange ;
    color:#fff ;
  }
}

模板

<button mat-raised-button class="black">black</button>
<button mat-raised-button class="gray">gray</button>
<button mat-raised-button class="orange">orange</button>

通过 ngClass 指令和布尔值属性设置 class 条件基数

 <button mat-raised-button 
        [ngClass]="{'black': isBlack , 'gray' : !isBlack}" (click)="isBlack =!isBlack" >
        click to toggle
 </button>

demo

Answer 3

<button mat-button [color]=" boolean_condition ? 'accent' : 'primary'">

这是一个使用 material 颜色的简单示例。

Angular Material 中的条件按钮颜色属性（组件）

Conditional button color attr in Angular Material (Components)

conditional-statements

angular-material

angular-components

angular