我有一個 div class="row"，我想根據一些可變情況制作一些 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貢獻1796條經驗 獲得超4個贊
.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>
我希望你能明白。您也可以應用自己的邏輯來刪除類。
梵蒂岡之花
TA貢獻1900條經驗 獲得超5個贊
我沒發現那么長。老實說，你最好保持這種狀態。使用函數將在每個周期觸發它。使用布爾值僅在值更改時觸發。
這就是我要做的
<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 關注
- 188 瀏覽
添加回答
舉報
0/150
提交
取消