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

Может ли кто-нибудь помочь мне с некоторым кодом, у меня есть массив объектов с разными данными в нем, а затем я отображаю его в таблице, используя * 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';
    }
});

вы должны придумать хотя бы попытку, а затем опубликовать свои проблемы, если вы столкнетесь с ними

— 05.12.2018 12:51

Вы упоминаете * ngfor, но нет кода, специфичного для html или angular. пожалуйста, предоставьте минимальный воспроизводимый пример

— 05.12.2018 14:43

javascript arrays angular

05.12.2018 12:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

599

Ответы 2

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

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

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

you will need moment.js here

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

05.12.2018 12:57

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

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

в компонент добавить функцию getColor()

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

      return 'blue'
  }

05.12.2018 13:17

Другие вопросы по теме

React Promise возвращает массив Firebase

Мой средний результат прибавляю 1 к правильному ответу

Как прочитать атрибут "name" моего json-массива в Ionic

Как извлечь значение из массива в Excel с помощью VBA

Как можно вызвать функцию обещания несколько раз асинхронно, чтобы заполнить массив заданным количеством значений?

Ассоциативное отображение массива

Цикл по каждому элементу внутри параметров, связанных с группой, с помощью <optgroup>

Как получить доступ к объекту stdclass внутри объекта stdclass в codeigniter

Создание массива объектов для всех комбинаций возможностей из 3 массивов с использованием javascript / typescript

VBA - непреднамеренное создание массива внутри массива

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

Ответы 2

Другие вопросы по теме

Похожие вопросы