如何在angular2中动态更改按钮颜色

我正在尝试动态更改我的按钮颜色，但没有实现。有人可以建议帮助吗

   <a  class="button buttonaquacss button-mini button-aqua  text-right pull-right"  (click)='send(button,detail.profile_id)' #button  [ngStyle]="{'background-color':  color}"><span><i class="icon-plus-sign"></i>{{detail.innerHTML}}</span></a>   




  if (detail.connection_status == '') {
                    detail.innerHTML = "connect";
                    this.color = "red";
                }




send(button, index): void {

    var str = localStorage.getItem('social');
    var loc = JSON.parse(str);
    var id = loc.profile_id;
    var formdata = { recieved_id: index, sent_id: id }

    this.color = 'blue';
    var headers = new Headers();

    headers.append('Content-Type', 'application/x-www-form-urlencoded')
    this.http.post('http://localhost/a2server/index.php/requests/sendrequest/', formdata, { headers: headers })
        .subscribe(
        response => {
            if (response.json().error_code == 0) {
                button.innerHTML = "Pending";
                button.disabled = true;
                this.color = "#127bdc";

            }
            else {
                button.innerHTML = "Unable to send request";
            }
        });


}

{{detail.innerHTML}
如果（detail.connection_status==''）{
detail.innerHTML=“连接”；
this.color=“red”；
}
发送（按钮，索引）：无效{
var str=localStorage.getItem（'social'）；
var loc=JSON.parse（str）；
var id=位置配置文件\u id；
var formdata={received_id:index，sent_id:id}
this.color='blue'；
var headers=新的headers（）；
headers.append（'Content-Type'，'application/x-www-form-urlencoded'）
this.http.post（'http://localhost/a2server/index.php/requests/sendrequest/，formdata，{headers:headers}）
.订阅(
响应=>{
if（response.json（）.error_code==0）{
button.innerHTML=“待定”；
button.disabled=true；
this.color=“#127bdc”；
}
否则{
button.innerHTML=“无法发送请求”；
}
});
}

---

我正在尝试动态更改按钮颜色，但未能实现。是否有人可以建议帮助

您可以利用

ngStyle

指令：

   <a  class="button buttonaquacss button-mini button-aqua  text-right pull-right"  (click)='send(button,detail.profile_id)' #button  [ngStyle]="{'background-color':  color}"><span><i class="icon-plus-sign"></i>{{detail.innerHTML}}</span></a>   




  if (detail.connection_status == '') {
                    detail.innerHTML = "connect";
                    this.color = "red";
                }




send(button, index): void {

    var str = localStorage.getItem('social');
    var loc = JSON.parse(str);
    var id = loc.profile_id;
    var formdata = { recieved_id: index, sent_id: id }

    this.color = 'blue';
    var headers = new Headers();

    headers.append('Content-Type', 'application/x-www-form-urlencoded')
    this.http.post('http://localhost/a2server/index.php/requests/sendrequest/', formdata, { headers: headers })
        .subscribe(
        response => {
            if (response.json().error_code == 0) {
                button.innerHTML = "Pending";
                button.disabled = true;
                this.color = "#127bdc";

            }
            else {
                button.innerHTML = "Unable to send request";
            }
        });


}

<a  class="button buttonaquacss button-mini button-aqua  text-right pull-right" 
    [ngStyle]="{'background-color':  color}">
  (...)
</a>

(...)

一个简单的解决方案是使用如下指令

ng-style="{color: myColor}"

---

指向控制器。

解决此问题的另一种方法是使用

[class.newColor]=“errorThrown”

创建一个覆盖颜色的条件类。这符合将逻辑与样式分离的原则

应该；-）您能在问题中添加

send

方法的内容吗？谢谢它不会改变，因为您已经在这里设置了静态代码。this.color=“#127bdc”；您应该从某处获取它，而不是在那里设置。是否执行以下块：

if（response.json（）.error_code==0）{…}

？这就是问题所在。你的按钮总是蓝色的。。。块在组件中的何处发生：

如果（detail.connection_status==''{…}

？这是costructor附带的，并且条件始终为真