Javascript 如果持续时间小于1小时或更长，如何添加条件ngClass

尝试添加有条件的

ngClass

，以确定

CollectionFrom

是否少于1小时或更长，然后为其中一个添加特定的类

var awaitingPicking = [
  {
   "id": "2452",
   "OrderLineGroups": [
     {
       "CollectionDetails": {
         "CollectionFrom": "2017-03-21T13:00:00.317"
       }
     }
   ]
  },
{
   "id": "2454",
   "OrderLineGroups": [
     {
       "CollectionDetails": {
         "CollectionFrom": "2017-03-24T12:55:00.317"
       }
     }
   ]
  }
 ]

使用moment.js转换currentTime和

CollectionFrom

time之间的差异

for(var i = 0; i < awaitingPicking.length; i++){
  var a = moment(awaitingPicking[i].OrderLineGroups[0].CollectionDetails.CollectionFrom);
  var b = moment(new Date())
   this.thirtyMins = a.diff(b, 'minutes');
  console.log(this.thirtyMins, a.diff(b, 'minutes') + 'minute(s) left');
}

我的问题是，

ngClass

条件似乎是错误的，它只取1个条件，要么是

<60

要么是

>60

，并且无法找到解决方法

---

我想您需要检查每个值的日期/时间是否不同？因此，我添加了一个函数，它执行此操作，并根据时间差返回值，然后设置类。更新的plunker

{{item.id}{{item.OrderLineGroups[0].CollectionDetails.CollectionFrom}

函数如下所示：-

public checkTime(time) {
    var a = moment(time);
    var b = moment(new Date());
    if (a.diff(b, 'minutes') < 60) {
      return "moreThan";
    } else {
      return "lessThan";
    }
}

公共检查时间（time）{
var a=力矩（时间）；
var b=时刻（新日期（））；
如果（a.diff（b，'分钟'）<60）{
返回“超过”；
}否则{
返回“lessThan”；
}
}

当持续时间即将结束时，是否有方法刷新/检测UI模板？我分叉了你的plnkr，用3个不同的类创建了3个条件，所以它在满足条件时会更改类，但必须刷新整个页面才能使类生效。事实上，我认为它会自动改变，thanksBtw如果我有更多的条件，切换情况会更好吗？对于切换情况，你必须知道值是多少，因为你使用的是大于或等于，如果语句是正确的。

<ul>
      <li *ngFor="let item of inputArray" [ngClass]="{
        'moreThan': checkTime(item.OrderLineGroups[0].CollectionDetails.CollectionFrom) === 'moreThan',
    'lessThan': checkTime(item.OrderLineGroups[0].CollectionDetails.CollectionFrom) === 'lessThan'
      }">
    {{item.id}} {{item.OrderLineGroups[0].CollectionDetails.CollectionFrom}}
      </li>
</ul>

public checkTime(time) {
    var a = moment(time);
    var b = moment(new Date());
    if (a.diff(b, 'minutes') < 60) {
      return "moreThan";
    } else {
      return "lessThan";
    }
}