以角度动态改变颜色和状态

Question

我正在开发一个角度应用程序。我有一个来自rabbitmq 的JSON 响应。该响应有一个级别参数，其值可以是低、中或高。如果在运行时级别值变低，那么我想将其表示为示例图像中所示的小矩形中的颜色以及与其相邻的级别。

每个关卡的颜色应随关卡名称动态变化。我怎样才能做到这一点？

我的回复看起来像这样

{
    "Source": "",
    "Type": "",
    "Timestamp": "2019-07-11T06:00:00.000Z",
    "Content": {
     level: medium
    }
}

我正在检索回复如下：

this.subscription = this.service.subscribe(resp => {
   this.level = resp.Content.level
}

Answer 1

你需要创建每个级别值的类基础，如低、中、高..

app.component.css

.medium , .low , .high{
  margin: 1rem;
  border:1px solid currentColor;
  padding: 0.5rem;
}

.medium{
 color: green
}

.low {
color: yellowgreen
}

.high {
  color: red
}

app.component.html

<div *ngFor=" let item of items" [ngClass]="item.Content.level">
    {{item.Content.level}}
</div>

演示

Answer 2

让我们首先设置您提供的示例，但添加一个枚举，我们将使用它来保持模板干净。

some.component.ts

import { Component, OnInit } from '@angular/core';
import { of, Subscription } from 'rxjs'

// Example level enum
export enum RabbitMqResponseLevel {
  Low = 'low',
  Medium = 'medium',
  High = 'high'
}

@Component({
  selector: 'my-app',
  templateUrl: './some.component.html',
  styleUrls: [ './some.component.css' ]
})
export class SomeComponent implements OnInit {

  level: RabbitMqResponseLevel;
  subscription: Subscription;

  constructor() {}

  ngOnInit() {
    this.subscription = this.simulateRabbitMq.subscribe(
      (resp) => {
        this.level = resp.Content.level as RabbitMqResponseLevel; // cast the string to our enum.
      }
    )
  }

  /**
   * returns an observable that we can subscribe to for this demos purpose.
   */
  private get simulateRabbitMq() {
    return of({
      "Source": "",
      "Type": "",
      "Timestamp": "2019-07-11T06:00:00.000Z",
      "Content": {
      level: 'medium' // assuming medium is a string.
      }
    });
  }

}

现在我们可以在组件样式文件中编写一些与您的级别字符串匹配的样式。

some.component.css

.low { color: green; }
.medium { color: orange; }
.high { color: red; }

最后你的模板文件可以保持干净并且看起来像这样

some.component.html

Status: <span [ngClass]="level">{{level}}</span>

这会在视觉上给你

这是一个 stackblitz 示例（我在虚假响应之间添加了延迟，以便您可以看到随着值的进入状态将如何变化）

https://stackblitz.com/edit/angular-changing-color-and-status-dynamically

---

编辑：添加替代解决方案以实现此目的的其他方法。

您还可以将状态颜色分离到其自己的组件中，并更直接地使用枚举中设置的类。这会删除我提供的示例中“应用程序组件”中的所有垃圾。

在此示例中，我创建了一个新组件，它接受级别输入并将其设置为类。剩下的就是编写 css 以您想要的任何方式响应类。

在本例中，我更改了字体颜色以匹配level，并创建了一个状态块以匹配level颜色。

import { Component, Input, HostBinding } from '@angular/core';
import { RabbitMqResponseLevel } from './rabbitmq-response-level.enum';

@Component({
  selector: 'level-status',
  template: `<span class="status-block"></span><ng-content></ng-content>`,
  styles: [`

    /* shape of the status block */
    :host > .status-block { 
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      margin-right: 0.5em;
      background-color: black; /* default color */
    }

    /* status block colors */
    :host.low    .status-block { background-color: green; }
    :host.medium .status-block { background-color: orange; }
    :host.high   .status-block { background-color: red; }

    /* font colors */
    :host.low     { color: green; }
    :host.medium  { color: orange; }
    :host.high    { color: red; }

  `]
})
export class LevelStatusComponent  {

  /**
   * This is the input that sets the class based on the enum string.
   * It uses HostBinding to class to auto attach the string value
   * to the elements class attribute.
   */
  @Input()
  @HostBinding('class') 
  level: RabbitMqResponseLevel;

}

app.component.html

Status: <level-status [level]="level">{{level}}</level-status>

这是一个实际工作示例https://stackblitz.com/edit/angular-changing-color-and-status-dynamically-2

Answer 3

您可以使用 ngClass https://angular.io/api/common/NgClass.

示例：

<your-level-element [ngClass]="{'low': parameter.level === 'low', 'medium': parameter.level === 'medium'}">

您将有 3 个课程（每个级别一个），您可以自定义背景（或任何样式）