我有一個(gè) div class="row"，我想根據(jù)一些可變情況制作一些 css 樣式。我就是這樣做的 <div class="row"[ngClass]="{ 'case1': displayUseShortWarning === true, 'case2': displayUseShortWarning === true && displaySellInCalifornia === true, 'case3': displayNoWarningOnProduct === false }"</div>.case1{ position: absolute; top: 0;}.case2{ position: absolute; top: 55px;}.case3{ position: absolute; top: 35px;}我的問題是如何用不同的代碼做同樣的事情？我不喜歡 ngClass 中有很多代碼
3 回答
慕的地8271018
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊
.ts 文件
displayClass = [];
someCondition = false;
onSomeConditionSetting() {
this.someCondition = !this.someCondition;
if (this.someCondition === true) {
!this.displayClass.includes('someClass') ?
this.displayClass.push('someClass') : '';
} else {
!this.displayClass.includes('someOtherClass') ?
this.displayClass.push('someOtherClass') : '';
}
}
html
<div class="row"
[ngClass]="displayClass">
</div>
<button (click)="onSomeConditionSetting()">Change Class</button>
我希望你能明白。您也可以應(yīng)用自己的邏輯來刪除類。
梵蒂岡之花
TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊
我沒發(fā)現(xiàn)那么長。老實(shí)說，你最好保持這種狀態(tài)。使用函數(shù)將在每個(gè)周期觸發(fā)它。使用布爾值僅在值更改時(shí)觸發(fā)。
這就是我要做的
<div class="row case" [ngClass]="{
'case1': displayUseShortWarning,
'case2': displayUseShortWarning && displaySellInCalifornia,
'case3': !displayNoWarningOnProduct
}">
</div>
.case {
position: absolute;
}
.case1 {
top: 0;
}
.case2 {
top: 55px;
}
.case3 {
top: 35px;
}
- 3 回答
- 0 關(guān)注
- 187 瀏覽
添加回答
舉報(bào)
0/150
提交
取消