我以组件的形式做了一个可重用的输入，我使用 ngClass 来设定不同的背景。它在 5 个场景中的 4 个中运行良好。有一种情况，名为“estados”的评估变量等于“pagado”，但它不会应用其对应的类。我不知道为什么。

请看看这个：

HTML：

<ion-item  lines="none" 
[ngClass]="{colorEvaluacion: estado === 'enEvaluacion', colorAprobado: estado === 'aprobado', colorPagado: estado === 'pagado', colorPagado: estado === 'aprobadoParcial', colorRechazado: estado === 'rechazado'}">
  <ion-icon name="time" ></ion-icon> //modificar el name tambien
  <ion-label >{{texto}}</ion-label>
</ion-item>

萨斯：

.iconEvaluacion {
    color: #F39837;
}

.colorEvaluacion {
    --background: #FDF6E9;
}

.iconAprobado {
    color: #329CDA;
}

.colorAprobado {
    --background: #ECF5FF;
}

.iconPagado {
    color: #78A856;
}

.colorPagado {
    --background: #E9F8E6;
}

.iconRechazado {
    color: #EC3F5A;
}

.colorRechazado {
    --background: #FFEDED;
}

TS：

从'@angular/core'汇入{组件，OnInit，输入}；

@Component({
  selector: 'app-chip-estados',
  templateUrl: './chip-estados.component.html',
  styleUrls: ['./chip-estados.component.scss'],
})
export class ChipEstadosComponent implements OnInit {

  @Input() estado: string;
  @Input() texto: string;

  constructor() { }

  ngOnInit() {}

}

这是父级的 HTML，我在其中呼叫它并通过资料系结将不同的“estados”属性从父级传递给子级。

  <app-chip-estados texto="En Evaluación" estado="enEvaluacion"></app-chip-estados>
  <app-chip-estados texto="Aprobado" estado="aprobado"></app-chip-estados>
  <app-chip-estados texto="Pagado" estado="pagado"></app-chip-estados>
  <app-chip-estados texto="Aprobado Parcial" estado="aprobadoParcial"></app-chip-estados>
  <app-chip-estados texto="Rechazado" estado="rechazado"></app-chip-estados>

uj5u.com热心网友回复：

原因低于[ngClass]系结内的值：

colorPagado: estado === 'pagado', colorPagado: estado === 'aprobadoParcial'

当 "estados" 等于 "pagado" 时，colorPagado: estado === 'pagado'条件导致类被添加，但colorPagado: estado === 'aprobadoParcial'条件评估为false并因此导致洗掉相同的类colorPagado。

如果要在 "estados" 等于 "pagado" 或 "aprobadoParcial" 时应用相同的类，则可以将表达式修改为：

colorPagado: (estado === 'pagado' || estado === 'aprobadoParcial')