基於json響應的角度切換按鈕2

我想切換基於後端響應的按鈕。如果響應爲「是」，則切換按鈕應該打開，如果響應爲否，切換按鈕應該關閉。下面是我的html代碼基於json響應的角度切換按鈕2

  <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（）的服務，因爲我要檢查是否響應一個GET服務是當頁面加載時是/否。研究後，我才知道我們可以使用ngclass來實現這一點，但我不知道如何做到這一點。

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

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

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

flagStatus變量具有響應（是/否）。讓我知道我是否以正確的方式做。

來源

2017-09-06 OptimusPrime

[Angular 2 - 基於JSON響應的切換按鈕]的可能重複（htt PS：//stackoverflow.com/questions/46078019/angular-2-toggle-button-based-on-json-response） – Lexi

設置正確的文本組件的代碼：

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-07 03:54:38 dhilt

我們可以使用https://www.w3schools.com/howto/tryit.asp?filename= tryhow_css_switch？如果回答爲是，如果沒有幻燈片，ibutton會向右滑動？ – OptimusPrime

這是完全沒有js的純CSS樣例，您將不得不做出很好的工作來將它與您的Angular應用程序連接起來。但是，是的，這是可能的。 – dhilt

基於json響應的角度切換按鈕2

回答

相關問題