我以組件的形式做了一個可重用的輸入，我使用 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 來設定不同的背景。它在 5 個場景中的 4 個中運行良好。有一種情況，名為“estados”的評估變數等于“pagado”，但它不會應用其對應的類。我不知道為什么。
原因低于[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')
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/417386.html
標籤：