ngClass пропускает некоторые классы и применяет только один класс к true - PullRequest
Новая
       8

ngClass пропускает некоторые классы и применяет только один класс к true

0 голосов
/ 13 февраля 2019

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>

На скриншоте ниже любой wifi.level со значением -35 будет применяться к только одному классу "хорошо" и пропустить остальные .и любой wifi.level со значением -63 будет применяться ко всем классам : «размерный прямоугольник сигнальных баров mt1, нормальный трехблочный»

enter image description here

То же, что и приведенный выше снимок экрана. wifi.level = -73 применяется только к классу "плохо".

enter image description here

При удалении ' ' и ( ) я получаю одинаковые результаты: 

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

1 Ответ

0 голосов
/ 13 февраля 2019

Сравните значение wifi.level с числами без ''.

Дайте мне знать, сработало ли это для вас.

...