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

Question

我的视图模型中有一个变量，其设置程序和获取程序称为：[[orderStatusColor。

这是如下字符串：“

颜色：红色”或“ 颜色：绿色”。

如何在HTML中将其用作样式？我曾尝试使用ngStyle，但收到一条错误，内容为

“

DevicesStatusComponent.html：12错误错误：找不到其他支持对象'颜色：红色'

”

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

您能否在使用视图模型的地方添加更多或完整的组件代码。