在angular中动态更改颜色和状态

Question

我正在开发一个angular应用程序。我有一个来自rabbitmq的JSON响应。此响应有一个参数level，它的值可以是low、medium或high。如果在运行时level的值很低，那么我想用小矩形中的颜色来表示它，并将level写在它旁边。

​

对于每个级别，颜色应随级别名称动态变化。我该怎么做呢？

我的响应如下所示

{
    "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

你需要创建每个级别值的类库，比如low，meduim，high。

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>

demo

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

编辑:为实现此目的的其他方式添加替代解决方案。

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

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

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

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个类(每个级别一个)，你可以自定义背景(或任何样式)