動的にクラスを指定する方法

Question

###前提・実現したいこと
*ngFor="let sensor of sensors"で取得したデータの中の値に応じてクラスを指定する方法がわかりません。
isErrorがtrueの時にクラスをerrorに指定したいです。

###該当のソースコード

<table class="sensor-table">
  <thead>
    <tr>
      <td class="header" colspan="10">一覧
        <button class="menu_btn" type="button" (click)="onClickMenu()">⋮</button>
      </td>
    </tr>
    <tr>
      <th></th>
      <th>番号</th>
      <th>エラー</th>
      <th>警報</th>
      <th>場所</th>
      <th></th>
      <th>温度（℃）</th>
      <th>湿度（%）</th>
      <th>日時</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let sensor of sensors">
      <td>
        <button class="color_btn" type="button" (click)="onClickColor(sensor)">色</button>
      </td>
      <td class="station">{{sensor.station}}</td>
      <td>{{sensor.error}}</td>
      <td>{{sensor.alarm}}</td>
      <td class="location">{{sensor.location}}</td>
      <td>
        <button class="history_btn" type="button" (click)="onClickHistory(sensor)">履歴</button>
      </td>
      <td class="temperature">{{sensor.temperature}}</td>
      <td class="humidity">{{sensor.humidity}}</td>
      <td>{{sensor.date}}</td>
      <td class="extra"></td>
    </tr>
  </tbody>
</table>

###表示用

export const SENSORS: Sensor[] = [
  {
    color: null,
    station: 1,
    error: null,
    isError: false,
    alarm: 0,
    isAlarm: true,
    location: '第１',
    temperature: 92,
    humidity: 65.2,
    date: '11/11 11:11'
  },
  {
    color: null,
    station: 2,
    error: null,
    isError: false,
    alarm: null,
    isAlarm: false,
    location: '第２',
    temperature: 45,
    humidity: 65.2,
    date: '11/11 11:11'
  },
  {
    color: null,
    station: 3,
    error: null,
    isError: false,
    alarm: null,
    isAlarm: false,
    location: '第3',
    temperature: 45,
    humidity: 65.2,
    date: '11/11 11:11'
  },
  {
    color: null,
    station: 4,
    error: 0,
    isError: true,
    alarm: null,
    isAlarm: false,
    location: '第4',
    temperature: 24,
    humidity: 65.2,
    date: '11/11 11:11'
  },
  {
    color: null,
    station: 5,
    error: 0,
    isError: true,
    alarm: 0,
    isAlarm: true,
    location: '第5',
    temperature: 51,
    humidity: 65.2,
    date: '11/11 11:11'
  },
  {
    color: null,
    station: 6,
    error: null,
    isError: false,
    alarm: null,
    isAlarm: false,
    location: '第6',
    temperature: 49,
    humidity: 65.2,
    date: '11/11 11:11'
  },
  {
    color: null,
    station: null,
    error: null,
    isError: false,
    alarm: null,
    isAlarm: false,
    location: null,
    temperature: null,
    humidity: null,
    date: null
  }
];

###試したこと
[ngClass]="{'error': sensor.isError}"

###補足情報(言語/FW/ツール等のバージョンなど)
言っている意味が分からなかったらすみません。
指摘していただければ補足いたします。

Answer 1

補足：この場合こういう指定もできます

<tr *ngFor="let sensor of sensors" [ngClass.error]="sensor.isError">

追加補足：文字列の代入だと他のclassも当てたいなどの場合、拡張性にかけるので、複数指定の場合はこの記述がオススメです。

<tr *ngFor="let sensor of sensors" [ngClass]="{'error': sensor.isError, 'empty': sensor.isEmpty}">

Comments

[kcysne]

おおお、スッキリしていて分かりやすいですね！！
これからはこちらを使っていこうと思います！！

ありがとうございました。

[kcysne]

重ねての補足ありがとうございます。

とても勉強になります！！

Answer 2

<tr *ngFor="let sensor of sensors;" [ngClass]="(sensor.isError)?'error':''">

自己解決しました。
これで動きました。