Как изменить цвет tr в соответствии со значением массива в Angular

Question

Может кто-нибудь помочь мне с некоторым кодом, у меня есть массив объектов с различными данными в нем, а затем я отображаю его в таблице с помощью * ngfor, так что теперь я хочу написать код, который будет проверять, является ли delivery_to меньшечем текущее время, он должен сделать этот ряд красным.поэтому для каждой строки, которую delivery_to меньше текущего времени, он должен стать красным.вот мой массив объектов

Вот то, что я пробовал, но по какой-то причине он повернул все красные

var array1 = [{
  "order_id": "241918",
  "customer_name": "Marietjie",
  "customer_surname": "Short",
  "total_items": "44",
  "completed_items": "17",
  "percent_complete": "38.64",
  "datetime_received": "2018-07-25 15:18:25",
  "delivery_date": "2018-10-29",
  "delivery_from": "12:00",
  "delivery_to": "13:00",
  "completed": "0",
  "shopper": "joel"
 },
 {
  "order_id": "281774",
  "customer_name": "Ashleigh",
  "customer_surname": "Hodge",
  "total_items": "16",
  "completed_items": "0",
  "percent_complete": "0.00",
  "datetime_received": "2018-10-04 15:59:19",
  "delivery_date": "2018-10-29",
  "delivery_from": "12:00",
  "delivery_to": "13:00",
  "completed": "0",
  "shopper": null
 },
 {
  "order_id": "232777",
  "customer_name": "Charisse",
  "customer_surname": "Bowles",
  "total_items": "30",
  "completed_items": "0",
  "percent_complete": "0.00",
  "datetime_received": "2018-07-24 17:28:22",
  "delivery_date": "2018-10-29",
  "delivery_from": "16:00",
  "delivery_to": "17:00",
  "completed": "0",
  "shopper": null
 }
]

array1.forEach(function(element) {
    if (element.delivery_to === "17:00") {
        colortest = 'red';
    }
});

Answer 1

попробуйте использовать это, используя *ngFor

<ul>
  <li *ngFor="let item of array1" [ngStyle]="{'color': getColor(item)}">{{ item.customer_name }}</li>
</ul>

в компоненте add getColor() function

getColor(item) {
      if(item.customer_name == "Ashleigh"){
        return 'red';
      }

      return 'blue'
  }

Answer 2

У вас есть 2 варианта здесь

вариант 1 - создать директиву для сравнения 2 разных времен

вариант 2 - использовать для цикла в контроллере, как

вам понадобится moment.js здесь

for(var i = 0; i< array1.length; i++) { 
    if(array1[i].delivery_to <= moment(new Date()).format(hh:mm)) { 
        array1[i].isRedClass = true;
    }
}

и в теге tr

<tr ng-repeat="array in array1" ng-class="{'redColor':array.isRedClass == true}">

и в css

.redColor{ 
    color:red;
}