角度2のボタンをクリックするとグリフアイコンが表示されます

Question

このボタンをクリックすると、「グリフコンプラス」が「グリフコンマイナス」に変わり、もう一度クリックするとグリフィンプラス' 私はそれがToggelableする必要がありますしたい。私はCSSやjqueryでそれを望んでいない。 app.component.html：あなたのテンプレートで

<button data-toggle="collapse" 
     [attr.data-target]="'#demo' + RowIndex"> 
     <span class="glyphicon glyphicon-plus"></span> 
</button> 

Answer 1

、結合signを使用すると、以下のように結合clickイベント：あなたのコンポーネントクラスで

<button data-toggle="collapse" 
     (click)="toggleSign()" 
     [attr.data-target]="'#demo' + RowIndex"> 
     <span class="glyphicon glyphicon-{{sign}}"></span> 
</button> 

、各クリックでsignプロパティを変更します。

export class MyComponent { 
    .... 
    sign = 'plus'; // or minus if you want that first 

    toggleSign() { 
    if(this.sign == 'plus') { 
     sign = 'minus'; 
    } else { 
     sign = 'plus'; 
    } 
    } 
    ...... 

} 

このように角度をつけて考えると、私の考えは自分のコンポーネントの状態を反映したものになります。だから私は視覚的に物事を変更する場合、バインディングシステムを使用して私のビューの可変部分を私のコンポーネントのプロパティにバインドし、ちょうど私が望むビューを反映するためにコンポーネントのプロパティを変更する。