ngClass 正在跳过一些课程，并且仅在 true 上应用一个课程答案

【问题标题】：ngClass is skipping some classes and applying only one class on truengClass 正在跳过一些课程，并且仅在 true 上应用一个课程
【发布时间】：2019-02-13 16:31:02
【问题描述】：

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 都将适用于只有一个“好”类并跳过其余的类。并且任何 wifi.level 值为 -63 将适用于所有类：“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>

【问题讨论】：

你的意思是它正在跳过'signal-bars mt1 sizing-box four-bars'并仅附加'good'类？
您是在比较数字还是字符串，例如(wifi.level) < '0'?
@Chellappan 是的，它跳过了你提到的课程
@ABOS 号码我猜，删除'' 和或( ) 让我得到相同的结果。
@user1741397，什么是wifi.level，一个数字？

标签： angular ionic-framework ng-class

【解决方案1】：

将wifi.level 的值与没有'' 的数字进行比较。

如果这对你有用，请告诉我。

【讨论】：

从数字中删除'' 时得到相同的结果（我之前尝试过但出现错误，但那是因为我忘了删除一个'）
我还尝试从wifi.level 中删除( )（并从数字中删除' '），但仍然得到相同的结果。
您能用您所做的更改更新问题中的代码吗？
用这个替换条件：(wifi.level+90) < (0+90) && (wifi.level+90) < (60+90);
对ngClass 的每个条件进行更改。让我知道它是否有效！