Угловая 7 ngClass строковое и объектное смешанное связывание - PullRequest
Новая
       21

Угловая 7 ngClass строковое и объектное смешанное связывание

0 голосов
/ 12 марта 2019

Я пытаюсь назначить имя CSS-класса из свойства компонента и условный класс, где color - «черный», «белый» или «синий» и т. Д. В зависимости от того, как я это сделаю из Vue. : [ngClass]="[color, { selected: color === selectedColor }]" не работает, как мне это сделать в Angular?

1 Ответ

0 голосов
/ 12 марта 2019

, пожалуйста, проверьте этот пример, который я создал: https://stackblitz.com/edit/angular-ufnzax?embed=1&file=src/app/app.component.ts

Это излишне для того, что вам нужно, но вы можете увидеть концепцию.Вы также можете проверять и использовать псевдоклассы по своему усмотрению.

основные идеи:

css 

.selected {
  border: 2px solid black;
}

.box {
  width:100px;
  height:100px;
  background-color: yellow;

}
.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
   background-color: blue;
}

Разметка 

<div  [ngClass]="assignClass()">
</div>

TS 

assignClass(){
        if (this.selectedColor) {
          return [ 'box', this.selectedColor, 'selected' ]; 
        } else {
          return [ 'box' ]; 
        }
    }
...