角2ボタンのスタイルを変更します。

Question

クリック時にボタンのスタイルを更新しようとすると、多くの問題が発生しています。

まず、ここではオリジナルのマークアップです："btn btn-remove"

変更に

1. 変更"btn btn-add"からクラス：ボタンをクリックすると

   <button class="btn btn-add" (click)="handleButtonClick(id)"> 
       Add<i class="fa fa-plus-circle"></i> 
   </button> 
   

   、私がしようとしています<i class="fa fa-plus-circle">〜<i class="fa fa-minus-circle">

これをどのように角度2方向に行うことができますか？今、私はブール値を追加してそれを反転し、その値に基づいて異なるテンプレートを表示します。しかし、これを処理する方法があるはずです。ドキュメントでは、複数のクラスのスペースで区切られた文字列を使用することができますが、その方法はわかりません。

Answer 1

あなたがngClassをしようとしたが、それとのトラブルがあったことを、次のように述べています

ディレクティブは、キーとブール値としてクラス名を持つオブジェクトを期待式を値として返します。式がtrueの場合はクラスが追加され、削除されない場合はクラスが追加されます。

あなたは、おそらくこのような何かを行うよりも、例えば、ボタンがクラスbtnを持っており、ブール値に応じてbtn-addまたはbtn-removeのいずれかを持っている必要があります。

<button class="btn" [ngClass]="{ 'btn-add': isAddButton, 'btn-remove': !isAddButton }"> 
</button> 

希望これは、その後、ngClassのご理解に役立ちますあなたの他のユースケースでそれを使うのは問題ではありません。

Answer 2

あなたはこのコードを試すことができます：あなたのコメントで

<button class="btn" [ngClass]="{'btn-add': !clicked, 'btn-remove': clicked}" (click)="clicked = true"> 
    Add<i class="fa" [ngClass]="{'fa-plus-circle': !clicked, 'fa-minus-circle': clicked}"></i> 
</button> 

Answer 3

すぎてボタンのテキストを切り替えるには：

<button class="btn" [ngClass]="{'btn-add': !clicked, 'btn-remove': clicked}" (click)="clicked = !clicked"> 
    {{clicked ? 'Remove' : 'Add'}} 
    <i class="fa" [ngClass]="{'fa-plus-circle': !clicked, 'fa-minus-circle': clicked}"></i> 
</button>