ngClass仅应用前三行中的一个类,并将在最后一行应用所有类:
<ion-list id="wifiList-list2">
<ion-item color="none" id="wifiList-list-item1" *ngFor="let wifi of wifi_list" on-click="goToSSID(wifi)">
<!-- <ion-icon name="wifi" item-left></ion-icon> -->
<div
[ngClass]="{
'signal-bars mt1 sizing-box good four-bars' : (wifi.level) < '0' && (wifi.level) > '-60',
'signal-bars mt1 sizing-box four-bars bad one-bar' : (wifi.level) <= '-70' && (wifi.level) > '-90',
'signal-bars mt1 sizing-box four-bars bad two-bars' : (wifi.level) <= '-67' && (wifi.level) > '-70',
'signal-bars mt1 sizing-box four-bars ok three-bars' : (wifi.level) <= '-60' && (wifi.level) > '-67'
}"
>
<div class="first-bar bar"></div>
<div class="second-bar bar"></div>
<div class="third-bar bar"></div>
<div class="fourth-bar bar"></div>
</div>
</ion-item>
</ion-list>
在下面的屏幕截图中,任何值为-35的wifi.level将仅适用于一个“好”类并跳过其余部分。任何值为-63的wifi.level都适用于所有类:“signal-bars mt1 sizing-box four-bars ok three-bars”
与上面的截图相同,wifi.level = -73仅适用于“坏”类。
删除' '
和( )
时,我的结果相同:
<ion-list id="wifiList-list2">
<ion-item color="none" id="wifiList-list-item1" *ngFor="let wifi of wifi_list" on-click="goToSSID(wifi)">
<!-- <ion-icon name="wifi" item-left></ion-icon> -->
<div
[ngClass]="{
'signal-bars mt1 sizing-box good four-bars' : wifi.level < 0 && wifi.level > -60,
'signal-bars mt1 sizing-box four-bars bad one-bar' : wifi.level <= -70 && wifi.level > -90,
'signal-bars mt1 sizing-box four-bars bad two-bars' : wifi.level <= -67 && wifi.level > -70,
'signal-bars mt1 sizing-box four-bars ok three-bars' : wifi.level <= -60 && wifi.level > -67
}"
>
<div class="first-bar bar"></div>
<div class="second-bar bar"></div>
<div class="third-bar bar"></div>
<div class="fourth-bar bar"></div>
</div>
</ion-item>
</ion-list>
将wifi.level
的值与没有''
的数字进行比较。
如果这对您有用,请告诉我。