Question

我正在研究角度应用程序。我有来自Rabbitmq的JSON响应。此响应具有级别参数，其值可以为低，中或高。如果在运行时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

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

示例：

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

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

Answer 3

让我们从设置您提供的示例开始，但是添加一个枚举，我们将使用该枚举来保持模板的干净。

some.component.ts

before_script:
  - export VAR1="${CI_PIPELINE_ID}"
  - export VAR2="test-${VAR1}"

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

some.component.css

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.html

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

这会在视觉上给您

这是一个令人眼花stack乱的示例（我在虚假响应之间添加了一个延迟，因此您可以看到状态随着值的变化而变化）

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

编辑：添加其他解决方案来实现此目的。

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

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

在这种情况下，我更改了字体颜色以匹配 level ，并创建了一个状态块以匹配 level 颜色。

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

app.component.html

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;

}

这是一个可行的在线示例https://stackblitz.com/edit/angular-changing-color-and-status-dynamically-2

动态更改颜色和状态

3 个答案: