如何在Thingsboard HTML组件中访问设备遥测数据并实时展示？

完全不需要必须使用Angular，纯原生HTML+JavaScript就能实现实时更新的遥测数据表格；如果你的项目本身已经基于Angular开发，用它的数据绑定语法会更简洁。下面分别说明两种实现方式：

一、纯原生HTML+JavaScript实现 #

先给表格的每个数据单元格添加ID，方便后续定位更新：

<table style="width:100%">
  <tr>
    <th>设备名称</th>
    <th>ONLINE?</th>
    <th>OPEN/CLOSED?</th>
  </tr>
  <tr>
    <th>Valve 1</th>
    <td id="valve1-online">Y/N</td>
    <td id="valve1-status">Open/Closed</td>
  </tr>
  <tr>
    <th>Valve 2</th>
    <td id="valve2-online">Y/N</td>
    <td id="valve2-status">Open/Closed</td>
  </tr>
  <tr>
    <th>Valve 3</th>
    <td id="valve3-online">Y/N</td>
    <td id="valve3-status">Open/Closed</td>
  </tr>
</table>

然后编写JavaScript逻辑，核心是获取遥测数据源的数据，再将数据更新到对应单元格：

// 模拟从后端/设备接口获取遥测数据，实际项目中替换为真实请求逻辑
function getTelemetryData() {
  return {
    valve1: { online: "Y", status: "Open" },
    valve2: { online: "N", status: "Closed" },
    valve3: { online: "Y", status: "Open" }
  };
}

// 更新表格内容的函数
function refreshTable() {
  const data = getTelemetryData();
  
  // 逐个更新每个阀门的状态
  document.getElementById("valve1-online").textContent = data.valve1.online;
  document.getElementById("valve1-status").textContent = data.valve1.status;
  
  document.getElementById("valve2-online").textContent = data.valve2.online;
  document.getElementById("valve2-status").textContent = data.valve2.status;
  
  document.getElementById("valve3-online").textContent = data.valve3.online;
  document.getElementById("valve3-status").textContent = data.valve3.status;
}

// 页面加载时先更新一次数据
refreshTable();
// 定时刷新，比如每5秒更新一次；如果要求实时性更高，可改用WebSocket
setInterval(refreshTable, 5000);

如果需要设备数据一变化就同步更新，推荐用WebSocket替代定时请求，示例：

// 连接到遥测数据的WebSocket服务
const ws = new WebSocket("ws://你的遥测服务地址");

// 收到推送的数据后立即更新表格
ws.onmessage = function(event) {
  const data = JSON.parse(event.data);
  
  document.getElementById("valve1-online").textContent = data.valve1.online;
  document.getElementById("valve1-status").textContent = data.valve1.status;
  // 其他阀门同理更新
};

ws.onopen = function() {
  console.log("已连接到遥测数据源");
};

二、Angular实现（可选） #

如果你的项目基于Angular开发，用它的数据绑定会更简洁：

1. 组件类中处理数据获取逻辑：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-valve-table',
  templateUrl: './valve-table.component.html'
})
export class ValveTableComponent implements OnInit {
  telemetryData: any;

  ngOnInit() {
    // 初始化加载数据
    this.loadTelemetryData();
    // 定时刷新数据
    setInterval(() => this.loadTelemetryData(), 5000);
  }

  loadTelemetryData() {
    // 实际中替换为HTTP请求或WebSocket监听逻辑
    this.telemetryData = {
      valve1: { online: "Y", status: "Open" },
      valve2: { online: "N", status: "Closed" },
      valve3: { online: "Y", status: "Open" }
    };
  }
}

2. 模板HTML使用插值绑定直接渲染数据：

<table style="width:100%">
  <tr>
    <th>设备名称</th>
    <th>ONLINE?</th>
    <th>OPEN/CLOSED?</th>
  </tr>
  <tr>
    <th>Valve 1</th>
    <td>{{ telemetryData?.valve1?.online }}</td>
    <td>{{ telemetryData?.valve1?.status }}</td>
  </tr>
  <tr>
    <th>Valve 2</th>
    <td>{{ telemetryData?.valve2?.online }}</td>
    <td>{{ telemetryData?.valve2?.status }}</td>
  </tr>
  <tr>
    <th>Valve 3</th>
    <td>{{ telemetryData?.valve3?.online }}</td>
    <td>{{ telemetryData?.valve3?.status }}</td>
  </tr>
</table>

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