Question

在经历了很多问题之后，我决定问这个问题... angular [ngClass]在10，24，100的值上很奇怪。我不知道背后的原因。希望大家都可以帮忙...

<div class="clearfix table-responsive mt-5">
      <table id="data_upload1" class=" table table-bordered table-striped table-hover selectParent">
        <thead>
          <tr>
              <th class="pointer">Obs</th>
              <th class="pointer">Date</th>
              <th class="pointer">Price</th>
              <th class="pointer">% Change</th>
            </tr>
        </thead>
        <tbody>
           <ng-container *ngFor="let price of priceList">
                            <tr> 
                                <td >{{price.serial}}</td>
                                <td >{{price.period}} </td>
                                <td ><input autofocus (blur)="updateValue($event, price.price)" type="text"
                                      [value]="value"  [(ngModel)] = "price.price" placeholder = ""   /></td>
                                <td [ngClass]="price.change >= price.hold  ? 'red': 'greenn'">{{price.change}} </td>
                            </tr>
              </ng-container> 
        </tbody>
      </table>
    </div>
    <button type="button" id="add_user_submit" class="btn btn-blue1 center-block">Save</button>
  </div>
</div>

这是后端的JSON格式

0:{id: 101, price: 40, period: "2018-02-01", hold: "10", change: "n.a."}
1:{id: 102, price: 42, period: "2018-03-01", hold: "10", change: "5.00"}
2:{id: 103, price: 43, period: "2018-04-01", hold: "10", change: "2.38"}
length:3

ngClass在诸如10，100，24之类的值上选择错误的类，而不是将其绿色显示为红色。

Answer 1

 buildTypes {
        release {
          //  minifyEnabled false
          //  proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
        debug {
          //  minifyEnabled false
          //  proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }

您正在比较两个字符串。

如果要比较两个数字，建议您将数据更改为

price.change >= price.hold

您与

的比较

0:{id: 101, price: 40, period: "2018-02-01", hold: 10, change: null}
1:{id: 102, price: 42, period: "2018-03-01", hold: 10, change: 5.00}
2:{id: 103, price: 43, period: "2018-04-01", hold: 10, change: 2.38}

Answer 2

在你所给定的条件下，没有一个条件是令人满意的。您正在比较两个字符串。如果要比较两个数字，请在字符串上方使用“ +”。

像这样：将字符串转换为数字： [ngClass] =“（+ price.change）> =（price.hold =='n.a.'？0：（+ price.hold））？'red'：'greenn'”

Answer 3

尝试这种方式：

  <tr *ngFor="let price of priceList"> 
      <td >{{price.serial}}</td>
      <td >{{price.period}} </td>
      <td ><input autofocus type="text" [(ngModel)] = "price.price" placeholder = ""   /></td>
      <td [ngClass]="(+price.change || 0) >= (+price.hold || 0) ? 'red': 'greenn'">{{price.change}} </td>
  </tr>

(+price.change || 0)会将字符串转换为数字，然后输入如果转换失败，如果数值无效，我们将获得0值作为后备广告

我认为您不需要使用[value]="value"和(blur)="updateValue($event, price.price)这就是ngModel要做的

ngClass错误答案

3 个答案: