Angular - 使用正则表达式和css使用ngIf和ngFor有条件地格式化标签

Question

我想有条件地从我从Web服务获得的数据中标记一些标签。 Web服务正常工作，数据保存到数组b。

例如，如果标签包含“蓝色”，则将其涂成蓝色，如果标签包含“红色”，则将其涂成红色等。我将有最多6个条件。

  <div class="centered">
        <h2>List of labels </h2>
                <label *ngFor="let a of b">  
                    {{a.x}}  
                  </label>
    </div>

Answer 1

你需要的是ngStyle。

<div class="centered">
        <h2>List of labels </h2>
        <label *ngFor="let a of b" [ngStyle]="{color: a.color}">  
           {{a.x}}  
        </label>
</div>

或者要求您的服务器提供classNames并使用[ngClass]

Answer 2

只需向Component添加一个函数，它返回任何颜色。

        <h2>List of labels </h2>
        <label *ngFor="let a of listA" [ngStyle]="{color: findColor(a)}">  
           {{a}}  
        </label>

例：

listA: string[] = ['I am red.', 'I am blue.', 'I am normal.']

  findColor(a: string): string {
    if(a.includes('red')) {
      return "#ff0000";
    }
    if(a.includes('blue')) {
      return "#0000ff";
    }
    return null;
  }

Answer 3

最后我发现了诀窍

HTML

<div class="centered">
        <h2>List of labels </h2>
                <label *ngFor="let a of b" [ngStyle]=" {color:findColor(a.x)}">

                    {{a.x}}  
                  </label>
    </div>

打字稿

public findColor(a: string): string {

      var blue = a.match(/blue/);
      var red = a.match(/red/);
      if(red) {
        return "#ff0000";
      }
      if(blue) {
        return "#0000ff";
      }
      return null;
    }

感谢你的帮助。正则表达式正常工作:)