Стили в Angular / PrimeNG не показывает

Question

Я использую PrimeNG и Angular для своего проекта frontEnd, я хочу показать Зеленый, когда состояние установлено как «неактивное», и красный, если состояние «срабатывает», и желтый, если оно «ожидает». В моем component.ts я использую следующий код:

import { Component, OnInit } from "@angular/core";
import { RulesService } from "src/app/services/rules.service";
import { Subscription, timer } from "rxjs";
import { Rules } from "src/app/models/Rules";
import { state } from "@angular/animations";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.css"],
  providers: [RulesService]
})
export class HomeComponent implements OnInit {
  subscription: Subscription;
  _ApiResult: Rules;

  constructor(private RulesService: RulesService) {}

  ngOnInit() {
    this.RulesService.getRules().subscribe(result => {
      this._ApiResult = result;
    });
  }

  //Getting rules from the service
  getRules(): void {
    this.RulesService.getRules().subscribe(
      result => (this._ApiResult = result)
    );
  }

  //Get the text color depending on the state
  getTextColor() {
    this._ApiResult.data.groups[0].rules.forEach(rule => {
      switch (rule.state) {
        case "inactive":
          rule.color = "green";
          break;
        case "pending":
          rule.color = "yellow";
          break;
        case "firing":
          rule.color = "red";
          break;
        default:
          rule.color = "green";
          break;
      }
    });
  }
}

И мой компонент. html:

<div class="content-section introduction">
  <div>
    <span class="feature-title" >Rules</span>
  </div>
</div>
<div *ngIf="!_ApiResult">
  <p>No data</p>
</div>
<div *ngIf="_ApiResult">
  <p-table [value]="_ApiResult.data.groups[0].rules" autoLayout = "true"
  >
    <ng-template pTemplate="header">
      <tr>
        <th>Name</th>
        <th>State</th>
        <th>Health</th>
        <th>Last evaluation time</th>
        <th>Type</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rule>

      <tr>
        <td  [ngStyle]="{color: getTextColor() }" >
        <strong>
          {{ rule.name }}
        </strong>
        </td>
        <td>{{ rule.state }}</td>
        <td>{{ rule.health }}</td>
        <td>{{ rule.lastEvaluation }}</td>
        <td>{{ rule.type }}</td>
      </tr> 

    </ng-template>
  </p-table>
</div>

Это не работает для меня, пожалуйста, если вы можете помочь или есть какие-либо советы, я буду так благодарен. Я новичок ie будь милым:)

Answer 1

У вас есть эта проблема, потому что

1. в вашем switch вы просто устанавливаете цвет на rule.color, чтобы ваша функция getTextColor() ничего не возвращала.
2. В вашем компоненте. html есть синтаксическая ошибка попробуйте

  <tr>
    <td [ngStyle]="{'color':getTextColor()}">
    <strong>
      {{ rule.name }}
    </strong>
    </td>
    <td>{{ rule.state }}</td>
    <td>{{ rule.health }}</td>
    <td>{{ rule.lastEvaluation }}</td>
    <td>{{ rule.type }}</td>
  </tr> 
</ng-template>