Как динамически изменить ngStyle?

Question

Мне нужно изменить несколько стилей при изменении какой-либо переменной.

Я могу использовать что-то вроде:

[style.left]="isMenuShown ? '0px' : '-100vw'"

, оно работает нормально, но я хочу изменить стили умножения.

И я пытаюсь использовать ngStyle пример :

<div [ngStyle]="styleList">...</div>

И в контроллере что-то вроде:

if (this.isDefaultStyle) {
    this.styleList = {'background' : 'green'};
  } else {
    this.styleList = {'background' : 'red'};
  }

Кажется, что это работает, но когда яосмотрите его с помощью f12 Я вижу

ng-refle-ng-style = "[объект]]

Таким образом, вопрос: означает ли это, что это не так?работает правильно?И если да, то как мне правильно динамически изменять ngStyle?

Answer 1

Вы можете использовать ngStyle вот так

<div [ngStyle]="{'background' : isDefaultStyle ? 'green' : 'red'}">...</div>

Answer 2

Используйте ngClass вместо ngStyle , так как вам нужно изменить несколько стилей.

Вот пример:

    <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

    <some-element [ngClass]="{'class1': var1===1, 'class2': var1===2, 'class3': var1===3}">...</some-element>

    <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

Описание:

Внутри объекта ngClass: ключ - это имя класса, а значение - условие.

Answer 3

Вы можете использовать функцию для выполнения динамических изменений.

<div [ngStyle]="getStyleList()">...</div>

В контроллере

function getStyleList(){
 if (this.isDefaultStyle) {
       return {'background' : 'green'};
  } else {
      return {'background' : 'red'};
  }
}

Answer 4

Используйте ngClass вместо ngStyle

<div [ngClass]="{isMenuShown ? 'show' : 'hide'}">...</div>

в css:

.show{multi style when show menu}
.hide{multi style when hide menu}