为什么 ngClass 在以下情况下重复评估属性的情况下失败？

Question

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

HTML:

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

SASS:

.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:

import { Component, OnInit, Input } from '@angular/core';

@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>

Answer 1

I made a reusable input in the form of a component, I used ngClass to set different backgrounds. and it works well in 4 out of 5 scenarios. There's a case where the evaluated variable named "estados" is equal to "pagado", but it won't apply its corresponding class. I can't figure out why.

原因低于 [ngClass] 绑定中的值：

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

当“estados”等于“pagado”时，colorPagado: estado === 'pagado' 条件导致添加 class，但 colorPagado: estado === 'aprobadoParcial' 条件计算为 false，从而导致结果在删除相同的 class colorPagado.

如果你想在“estados”等于“pagado”或“aprobadoParcial”时应用相同的class，那么你可以将表达式修改为：

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

为什么 ngClass 在以下情况下重复评估属性的情况下失败？

Why ngClass is failing in a case where the evaluated property is repeated in the following case?

ng-class

ionic-framework

angular

为什么 ngClass 在以下情况下重复评估 属性 的情况下失败？

Why ngClass is failing in a case where the evaluated property is repeated in the following case?

ng-class

ionic-framework

angular

为什么 ngClass 在以下情况下重复评估属性的情况下失败？