0

我正在尝试根据后端响应切换按钮。如果响应为是，则切换按钮应打开，如果响应为否，则切换按钮应关闭。下面是我的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 变量有响应（是/否）。让我知道我是否以正确的方式做事。

4

1 回答 1

0

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

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>
于 2017-09-07T03:54:38.423 回答