嘿，作为Node-RED新手碰到这种样式调整的小问题太正常啦，我来帮你搞定这个Status字段的颜色显示！

我们可以利用Node-RED仪表盘基于AngularJS的特性，通过动态样式绑定或者类名切换来实现需求，这里给你两种实用方案：

方案1：使用ng-class（推荐，样式更易维护） #

先定义好样式类，再根据Status值自动切换类名，适合后续可能调整样式的场景：

<style>
/* 定义两种状态的样式 */
.status-in-use { 
  color: #2ecc71; /* 柔和的绿色 */
  font-weight: bold;
}
.status-not-in-use { 
  color: #e74c3c; /* 醒目的红色 */
  font-weight: bold;
}
</style>

<!-- 表头部分 -->
<div layout="row" layout-align="start center">
  <span flex><b>Station</b></span>
  <span flex><b>Status</b></span>
</div>

<!-- 数据行渲染（假设数据存在msg.payload数组中） -->
<div ng-repeat="row in msg.payload" layout="row" layout-align="start center">
  <span flex>{{row.Station}}</span>
  <!-- 根据Status值绑定对应样式类 -->
  <span flex ng-class="{
    'status-in-use': row.Status === 'In Use',
    'status-not-in-use': row.Status === 'Not in Use'
  }">
    {{row.Status}}
  </span>
</div>

关键点说明： #

• 用<style>提前定义样式类，后续改颜色或加粗只需要修改这里
• ng-repeat用来遍历你的数据数组（如果你的数据存在其他字段，比如msg.data，替换成对应路径即可）
• ng-class会自动匹配Status值，给元素加上对应的样式类

方案2：内联样式绑定（快速简单） #

如果只是临时需求，不想单独写CSS，直接用三元表达式实现内联样式：

<!-- 表头部分 -->
<div layout="row" layout-align="start center">
  <span flex><b>Station</b></span>
  <span flex><b>Status</b></span>
</div>

<!-- 数据行渲染 -->
<div ng-repeat="row in msg.payload" layout="row" layout-align="start center">
  <span flex>{{row.Station}}</span>
  <!-- 直接通过三元表达式判断颜色 -->
  <span flex style="font-weight: bold; color: {{row.Status === 'In Use' ? 'green' : 'red'}}">
    {{row.Status}}
  </span>
</div>

适配表格结构的补充： #

如果你的模板原本是用<table>标签构建的，也可以把逻辑套进去，比如：

<table style="width:100%; border-collapse: collapse;">
  <thead>
    <tr>
      <th style="border-bottom:1px solid #ddd; padding:8px;">Station</th>
      <th style="border-bottom:1px solid #ddd; padding:8px;">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in msg.payload">
      <td style="padding:8px;">{{row.Station}}</td>
      <td style="padding:8px;" ng-class="{
        'status-in-use': row.Status === 'In Use',
        'status-not-in-use': row.Status === 'Not in Use'
      }">
        {{row.Status}}
      </td>
    </tr>
  </tbody>
</table>

替换代码的时候记得根据你的实际数据字段名调整（比如如果你的站点字段叫StationName，就把row.Station改成row.StationName），直接放到Template节点里就能生效啦！

内容的提问来源于stack exchange，提问作者AdzzzUK