Angular 6 - Как отформатировать [ngClass] при использовании переменной
Я хочу добавить класс на основе элемента в объекте в моем файле машинописного текста компонентов. Кажется, я не могу получить правильный формат, чтобы это работало.
Когда значение «selectedColourPalette» больше нуля, я хочу добавить основной цвет из «colorPaletteOne» в HTML.
CSS
colourPaletteOne = {
primary: 'blue',
secondary: 'grey',
}
HTML
<div> [ngClass] = "{'border-{{colourPaletteOne.primary}}' : selectedColourPalette > 0}"></div>
Ответы 3
Попробуй это:
Условие: если отображается selectedColourPalette > 0, чем border-blue, в противном случае будет отображаться border-grey.
HTML
<div [ngClass] = "selectedColourPalette > 0? 'border-' + colourPaletteOne.primary:'border-' + colourPaletteOne.secondary">sadvsdv</div>
ТС
selectedColourPalette = 1;
colourPaletteOne = {
primary: 'blue',
secondary: 'grey',
}
CSS
.border-blue {
background-color: blue;
}
.border-blue {
background-color: grey;
}
Спасибо за ответ @Abhishek. К сожалению, это не то, как мне нужно, чтобы это работало в этом случае. Каждый объект цветовой палитры будет содержать несколько цветов, которые я хотел бы добавить в html. Как вы можете видеть в моем примере, мне нужно было бы получить класс "border-blue" и т. д.
@ Que ok colourPaletteOne является переменной?
Это значение в объекте. Например, это будет работать: [ngClass] = "'border-' + colorPaletteOne.primary" - и будет назначен правильный цвет. Мне просто нужно знать способ его форматирования, чтобы он применялся только на основе условия. Выбрано ли это условиеColourPalette === 1 или > 0.
Вы понимаете, что 1 также > 0?
хаха да. Меня не смущает условие, я просто форматирую его таким образом, чтобы принять условие.
Вы не должны использовать двойные фигурные скобки {{ }} при привязке к атрибуту с помощью квадратных скобок []. Поэтому было бы так:
<div [ngClass] = "selectedColourPalette > 0 ? 'border-' + colourPaletteOne.primary : ''"></div>
Примечание для редактирования: изменена структура ngClass, исправлена опечатка.
Обновлять
Если вы хотите улучшить логику проверки условий, вы можете добавить метод в компонент и передать ему параметры, возвращая желаемый класс CSS в виде строки. Нравится:
В шаблоне
<div [ngClass] = "getCssClassByPalette(selectedColourPalette, colourPaletteOne)"></div>
В компоненте
getCssClassByPalette = (scp, cp) => {
let cssClass = '';
swicth(scp){
case 1: {
cssClass = cp.primary;
/* do stuff */
break; // or return the css class
}
/* other cases */
}
return cssClass;
}
Спасибо, Харун, ты не возражаешь, если я спрошу, что означает : '' в конце? Это позволяет провести еще одну проверку состояния?
Пожалуйста. Да, это тернарный оператор. condition ? true statement : false statement . Вы также можете проверить этот ответ: https://stackoverflow.com/a/37091329/1331040
ах поймал. Хорошо, наконец, (если вы не возражаете) - Как это могло принять множественное условие, противоположное «истинному» или «ложному» сценарию. Например, 'selectedColourPalette === 1' добавить этот класс, если selectedColourPalette === 2' сделать это и т.д.?
Очень мило с вашей стороны, что нашли время ответить на этот дополнительный вопрос. Спасибо Харун!
Не беспокойтесь :) Хорошего дня!
Поскольку вы просто хотите добавить один предопределенный класс, другим вариантом будет:
<div [class.border-blue] = "selectedColourPalette > 0"></div>
colourPaletteOneнаходится в файле машинописного текста или css?