基于角度 2 中的 json 响应的切换按钮

Question

我正在尝试根据后端响应切换按钮。如果响应为“是”，则切换按钮应打开，如果响应为“否”，则切换按钮应关闭。 下面是我的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>

下面是我的组件代码，我在其中调用了一个返回响应是或否的 get 服务。我在 ngOnit() 中调用该服务，因为我想在页面加载时检查响应是否为是/否。研究我开始知道我们可以使用 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';
      }
    }));
  }

并将其传递到组件的模板中（Angular/Interpolation）：

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

你也可以玩课程 (Angular/Class binding)：

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