Question

尝试添加条件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时间之间的差异

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');
}

在tempalte中，这是我想到的伪代码条件和最终结果。出于某种原因，它会在每个按钮上添加halfHour，它只应添加到符合条件的按钮上。

 <div *ngFor="let prepare of awaitingPicking" id="prepareOrder"> 
   <button [ngClass]="{'halfHour':thirtyMins < 60, 'moreThanHour': thirtyMins > 60}"> {{ prepare.Id }}</button>
</div>

我的问题是，ngClass条件似乎是错误的，并且只有< 60或>60只有1个条件，并且无法找出解决方法。< / p>

Sample Plnkr

Answer 1

我认为你需要检查每个值不同的日期/时间吗？所以我添加了一个函数，它执行此操作并根据时间差返回值并设置类。更新了plunker here

<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";
    }
}

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

1 个答案: