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

である私は、応答を返すのいずれかYesまたは私が応答するかどうかを確認したいので、No.Iは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変数に応答（はい/いいえ）があります。 私が正しい方法でやっているかどうか教えてください。

Answer 1

コンポーネントのコードの右のテキストに設定します。

：また、あなたは、クラス（ Angular/Class binding）でプレイしてもよい

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

：

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

を、コンポーネントのテンプレート（Angular/Interpolation）にそれを渡します

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