Angular 5 - 在 HTML CSS 中使用来自视图模型的变量

Question

我的视图模型中有一个名为 setter 和 getter 的变量：orderStatusColor.

这是一个字符串，如下所示：“color:red”或“color:green”。

如何在我的 HTML 中使用它作为样式？我试过使用 ngStyle 但我收到一条错误消息

"DevicesStatusComponent.html:12 ERROR 错误：找不到不同的支持对象 '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
          );

查看-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

看来，你在变量devicesStatusViewModel.orderStatusColor中传递了一个字符串，而应该是一个对象。如下图

component.ts

public style = {color:'blue'};

component.html

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

Answer 2

看来您没有很好地使用 ngstyle 指令。你应该把它放在 [] 之间，如官网所示 LINK

Answer 3

更改以下内容

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

在组件中将 JSON 字符串解析为 JSON 对象（因为 ngStyle 需要一个对象）

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

现在您可以在模板 html 中使用它，例如

<div [ngStyle]="orderStatusColor">

Angular 5 - 在 HTML CSS 中使用来自视图模型的变量

Angular 5 - Use variable from view-model in HTML CSS

html

css

typescript

ecmascript-6

angular5