Angular 6 - Как отформатировать [ngClass] при использовании переменной

Question

Я хочу добавить класс на основе элемента в объекте в моем файле машинописи компонентов.Кажется, я не могу заставить формат работать правильно.

Когда значение selectedColourPalette больше нуля, я хочу добавить основной цвет из colourPaletteOne в HTML.

CSS

colourPaletteOne = {
    primary: 'blue', 
    secondary: 'grey',    
  }

HTML

<div> [ngClass]="{'border-{{colourPaletteOne.primary}}' : selectedColourPalette > 0}"></div>

Answer 1

Не следует использовать двойные скобки {{ }} при привязке к атрибуту в квадратных скобках [].Следовательно, это будет выглядеть так:

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

Answer 2

Так как вы просто хотите добавить один предопределенный класс, другой вариант будет:

<div [class.border-blue]="selectedColourPalette > 0"></div>

Answer 3

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

Условие, если selectedColourPalette > 0, чем border-blue, будет показано в противном случае border-grey будет показано

HTML

<div [ngClass]="selectedColourPalette > 0? 'border-' + colourPaletteOne.primary:'border-' + colourPaletteOne.secondary">sadvsdv</div>

TS

  selectedColourPalette = 1;
      colourPaletteOne = {
        primary: 'blue', 
        secondary: 'grey',    
      }

CSS

.border-blue {
    background-color: blue; 
  }
.border-blue {
    background-color: grey;
  }