ThingBoard PE自定义组件报错：self.ctx.$scope.$apply is not a function

问题本质 #

你碰到的这个错误，核心原因是ThingBoard PE的组件上下文里，self.ctx.$scope并不是标准AngularJS的$scope对象，自然没有$apply方法。虽然API请求已经成功返回数据，但错误的调用导致数据没法绑定到表格视图。

解决方案 #

直接抛弃$apply，改用ThingBoard组件内置的视图更新机制：给$scope赋值后，调用self.ctx.updateComponent()触发视图刷新。

修改后的完整代码：

self.onInit = function() {
    self.ctx.$scope.fetchData = function() {
        const url = 'https://xxxxx.xxxxxxxxxxxxxx';
        const username = 'xxxxxxxxxxxxxxxxxxx'; 
        const password = 'xxxxxxxxxxxxxxxxx'; 

        const headers = new Headers({
            'Authorization': 'Basic ' + btoa(`${username}:${password}`),
            'Content-Type': 'application/json'
        });

        fetch(url, { method: 'GET', headers: headers })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                // 直接给$scope赋值，无需$apply
                self.ctx.$scope.data = data && data.length > 0 ? data : null;
                // 调用组件内置方法刷新视图
                self.ctx.updateComponent();
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                self.ctx.$scope.data = null;
                self.ctx.updateComponent();
            });
    };

    self.ctx.$scope.fetchData();
};

为什么$timeout也没用？ #

你尝试用$timeout替代之所以无效，是因为ThingBoard组件上下文没有注入Angular的$timeout服务，这种Angular原生方法在组件环境里不适用，必须用ThingBoard提供的组件API。

额外优化建议 #

• 别在代码里硬编码用户名和密码，建议通过ThingBoard的实体属性或者组件配置参数传递，既安全又方便后续修改。
• 可以加个加载状态提升体验：

  // 初始化时设置加载状态
  self.ctx.$scope.loading = true;
  
  // 在请求完成的then和catch里更新状态
  self.ctx.$scope.loading = false;
  

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