基于在角2 JSON响应切换按钮(Toggle button based on json respo

我想基于后端的切换按钮response.If的响应是肯定的，切换按钮应该是ON，如果响应为否，切换按钮应该关闭。 下面是我的html代码

          <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>

下面是我的部分代码，在那里我打电话，是因为我要检查响应是否是返回的响应是或者没有。我正在呼叫的ngOnit（服务）的获取服务/否当页面loads.Upon研究，我来了要知道，我们可以使用ngclass实现这一点，但我不知道该怎么做。

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

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

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

flagStatus变量具有响应（是/否）。 让我知道如果我在正确的方式在做。

Answer 1:

设置在组件的代码右侧的文本：

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

并将其传递到组件的模板（ 角/插值 ）：

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

你也可以使用类（玩角/类绑定 ）：

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

文章来源: Toggle button based on json response in angular 2