ボタンの色、アイコン、テキストを角度2に変更します

Question

ボタンをクリックしたときにブール値に基づいてボタンの色、アイコン、テキストを変更したいと思います。私がアクティブなボタンをクリックすると、それは非アクティブに変わり、色はbtn-suceessからbtn-dangerに変わり、fa-banからfa-checkに変わるはずです。今、私はテキストのみを変更することができていますが、現在値がで更新取得されていない

deactivate(user){ 
    this.user.active = true; 
    this.userService.userStatus(this.user).subscribe(
    user => { 
     console.log(user); 
    }, 
    err => { 
    console.log('err:', err); 
    } 
); 
    }; 

activate(user){ 
this.user.active = false; 
this.userService.userStatus(this.user).subscribe(
    user => { 
    console.log(user); 
    }, 
    err => { 
    console.log('err:', err); 
    } 
); 
}; 

click() { 
    if (this.user.active) { 
     this.user.active = false; 
     this.text = "Active"; 
    } else { 
     this.user.active = true; 
     this.text = "Deactive"; 
    } 
} 

：

<button [hidden]= "user.active" [ngClass]="{ 'btn-danger': user.active, 'btn-success': !user.active}" (click) ="click()"> 
    <i [ngClass]="{'fa-ban': user.active, 'fa-check': !user.active}" class="fa"> </i> 
    {{ text }} 
</button> 

はその後.TSに私は2つのメソッドを持っているファイルと私はこのような一つの方法を追加しましたdbやアイコンやボタンの色は変更されません。

Answer 1

あなたはブートストラップを使用しているので、ホイールを改造するのではなく、ブートストラップボタントグルを使用するのはなぜですか？

https://v4-alpha.getbootstrap.com/components/buttons/

Answer 2

あなたはそれについて間違った道を進みました。テンプレートにはそのボタンが1つだけ含まれている必要があります。私は直接DOM要素にアクセスするための$ event.targetを使用していないことを

export class MyComponent { 
    user = { active: true }; 
    text = "Deactive"; 

    click() { 
     if (this.user.active) { 
      this.user.active = false; 
      this.text = "Active"; 
     } else { 
      this.user.active = true; 
      this.text = "Deactive"; 
     } 
    } 

注：

<button [ngClass]="{'btn-danger':user.active, 'btn-success':!user.active}" 
     (click)="click()"> 
    <i [ngClass]="{'fa-ban':user.active, 'fa-check':!user.active}" class="fa"> </i> 
    {{text}} 
</button> 

そして、このようなコンポーネント何か：それはこのようなものでなければなりません。 Angularを使用する場合は、避けるようにしてください。私の例では、ボタンとアイコンのテキストとクラスを角度を使って変更する方法を示します。

これがどのように機能するか教えてください。更新OPによる

編集：私は、実施例でPlunkerを作成しました

。明らかにボタンが無効になっている（意味をなさない）ときに、（クリック）イベントが発生しないようにするため、ボタンの[disabled]を削除する必要がありました。 しかし、それはまだ角度の方法で色やテキストを変更する方法を、うまく示しています

https://plnkr.co/edit/VxxoUeSHrP0I8lyMiVNK

だけでリンクをクリックして、上部のバーに黒い「実行」ボタンを押してください。 TSファイル内

Answer 3

クリックボタン

this.clickActive = !this.clickActive;