如何根据URL的结果更改angular 7网站上的css元素？

Question

我有几个sonoff tasmotas，我正在为他们制作一个Web控制面板。如果我去http://sonoff/cmnd?cmnd=Power（或类似的东西），它会回复{“power”：“on”}或{“power”：“off”}。如何根据此响应更改应用于html对象的css类。当我手动按下sonoff上的按钮而不重新加载页面时，我还需要更改它。

任何帮助都感激不尽

我是一个总菜鸟，我使用ng new PrinterPanel --routing创建了一个新项目并没有改变结构。

Answer 1

我猜测对URL的调用是从控制器/服务进行的。如果是这种情况你可能有一些函数，你正在调用点击和其他事件，也许这样的东西将适合你：

<span ng-class="styleFunction('Power')">some text</span>

并在控制器中：

$scope.styleFunction = function(param){

$http.get(http://sonoff/cmnd?cmnd=" + param)
  .then(function(response) {
    if (response[param] === 'on')
        return "ClassOn";
    else
        return "ClassOff";
  });    
  }  
}