Как использовать NgStyle с условной функцией?

Question

У меня есть функция carDateCalculator, которая возвращает истину или ложь в соответствии с полученным параметром. Вот то, что я пытался изменить фон, но не сработало. Я получаю синтаксический анализ шаблона Ошибка. Если функция возвращает истину, я изменю цвет фона как красный иначе ничего не получится

Вот что я попробовал

<span [ngStyle]="{ carDateCalculator(car.Date) ? {'background-color': 'red'} }">

Answer 1

Попробуйте это

Вы используете неправильный синтаксис. Имя свойства должно предшествовать условию, которое вы хотите проверить. Попробуйте это

.ts

export class AppComponent  {
  value = 1;
  carDateCalculator(value){
   return value === 1 ? true : false
  }
}

. html

<span [ngStyle]="{'background-color': carDateCalculator(value) ? 'red' : ''}">Some example text</span>

Answer 2

Установка стилей с использованием NgStyle работает как пара ключ: значение. ключ - это имя свойства стиля, а значение - это значение стиля.

Вы использовали условное выражение неправильно, вместо этого используйте его, чтобы установить красный цвет, когда функция возвращает значение true, иначе не установите.

<span [ngStyle]="{ 'background-color': carDateCalculator(car.Date) ? 'red': '' }">Some text</span>

Answer 3

Обновите условное выражение NgStyle, например:

<span [ngStyle]="{ 'background-color': carDateCalculator(car.Date) ? 'red': '' }">

Формат выглядит так:

[ngStyle]="{ 'property-name': property-value }"

Answer 4

Делай так:

<span [ngStyle]="{ 'background-color': carDateCalculator(car.Date) ? 'red': 'black' }">

Answer 5

Создание канала carDateCalculatorPipe, который бы сам устанавливал этот стиль, был бы лучше по производительности, поскольку он останавливается после сопоставления.

Методы внутри компонентов настраивают процесс, который постоянно обновляет это условие.

Проверьте оба с console.log, вы увидите разницу.