Angular 5 - Использовать переменную из модели представления в HTML CSS

Question

У меня есть переменная в моей модели представления с ее сеттером и геттером: orderStatusColor .

Эта строка выглядит следующим образом: " цвет: красный"или" цвет: зеленый".

Как я могу использовать это как стиль в моем HTML? Я пытался использовать ngStyle, но я получаю сообщение об ошибке

" DevicesStatusComponent. html: 12 Ошибка: ошибка: не удается найти другой поддерживающий объект 'color: red' "

controller.ts

private orderStatusColorCode(code: string){

    const codeRed = this.orderInProgressCmsModel.orderStatusColorRed.split(",");

    if(codeRed.some(s => s.includes(code))){
      this.orderStatusColor = "color: red";
    }
    return this.orderStatusColor;
}

orderViewModel.devices =
          new DevicesStatusViewModel(
            this.orderStatusColor
          );

view-model.ts

interface DevicesStatusViewModelI {
  orderStatusColor: string;
}

export class DevicesStatusViewModel implements DevicesStatusViewModelI {
  private _orderStatusColor = '';

  get orderStatusColor(): string { return this._orderStatusColor; }

  set orderStatusColor(orderStatusColor: string) {
    this._orderStatusColor = (orderStatusColor != null) ? orderStatusColor : "";
  }

  constructor(orderStatusColor?: string) {
    this.orderStatusColor = orderStatusColor;
  }
}

HTML

<ng-container>
    <p ngStyle="{{devicesStatusViewModel.orderStatusColor}}">Test</p>
</ng-container>

Answer 1

Измените следующее

if(codeRed.some(s => s.includes(code))){
  this.orderStatusColor = '{"color": "red"}';
}

Разобрать строку JSON в объект JSON (поскольку ngStyle ожидает объект) в компоненте, как показано ниже

this.orderStatusColor = JSON.parse('{"color": "red"}');

Теперь вы можете использовать это в шаблоне html как

<div [ngStyle]="orderStatusColor">

Answer 2

может показаться, что вы плохо используете директиву ngstyle. Вы должны поместить его между [], как показано на официальном сайте LINK

Answer 3

Кажется, вы передали строку в переменную devicesStatusViewModel.orderStatusColor, вместо этого она должна быть объектом. Как показано ниже

component.ts

public style = {color:'blue'};

component. html

<h1 [ngStyle]="style">This is header in blue</h1>