基于角度 2 中的 json 响应的切换按钮 [英] Toggle button based on json response in angular 2

问题描述

我正在尝试根据后端响应切换按钮.如果响应为 Yes，则切换按钮应打开，如果响应为 No，则切换按钮应关闭.下面是我的html代码

 
<button class="btn btn-sm btn-default">ON</button><button class="btn btn-sm btn-primary ">OFF</button>

下面是我的组件代码，其中我调用了一个 get 服务，该服务返回响应是或否.我在 ngOnit() 中调用该服务，因为我想检查页面加载时响应是否为是/否.研究我开始知道我们可以使用 ngclass 来实现这一点，但我不知道如何做到这一点.

 ngOnInit() {this.service.getFlagStatus().toPromise().then((flagStatus => {this.flagStatus=flagStatus;//if(flagStatus == 'Yes'){//向右切换//}else if (flagStatus == 'No') {//向左切换//}}));}

flagStatus 变量有响应(是/否).如果我做对了，请告诉我.

解决方案

在组件代码中设置正确的文本:

ngOnInit() {this.service.getFlagStatus().toPromise().then((flagStatus => {if(flagStatus == '是'){this.text = 'ON';} else if (flagStatus == 'No') {this.text = '关闭';}}));}

并将其传递到组件的模板中(Angular/Interpolation):

<button class="btn btn-sm btn-primary">{{text}}</button>

你也可以使用类(Angular/Class binding):

<按钮class="btn btn-sm"[class.btn-default]="text == 'ON'"[class.btn-primary]="text != 'ON'">{{text}}</button>

I am trying to toggle button based on backend response.If the response is Yes, toggle button should be ON, if the response is No, toggle button should be off. Below is my html code

          <div class="btn-group btn-toggle">
  <button class="btn btn-sm btn-default">ON</button>
  <button class="btn btn-sm btn-primary ">OFF</button>
</div>

Below is my component code, where i calling a get service which returns response either Yes or No.I am calling the service in ngOnit() because i want to check whether the response is Yes /No when the page loads.Upon research i came to know we can achieve this using ngclass, but i am not sure how to do that.

    ngOnInit() {
        this.service.getFlagStatus().toPromise().then((flagStatus => {
          this.flagStatus= flagStatus;

         //if(flagStatus == 'Yes'){
                  //toggle right

             // }else if (flagStatus == 'No') {
                //toggle left
             // }
        }));
      }

flagStatus variable has the response(Yes/No). Let me know if i am doing in the right way.

解决方案

Set right text in the component's code:

ngOnInit() {
    this.service.getFlagStatus().toPromise().then((flagStatus => {
      if(flagStatus == 'Yes'){
         this.text = 'ON';
      } else if (flagStatus == 'No') {
         this.text = 'OFF';
      }
    }));
  }

And pass it into the component's template (Angular/Interpolation):

<div class="btn-group btn-toggle">
  <button class="btn btn-sm btn-primary">{{text}}</button>
</div>

Also you may play with classes (Angular/Class binding):

<button 
    class="btn btn-sm" 
    [class.btn-default]="text == 'ON'" 
    [class.btn-primary]="text != 'ON'">{{text}}</button>

这篇关于基于角度 2 中的 json 响应的切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！