각도 2의 버튼을 클릭하면 글리프 아이콘이 변경됩니다.

Question

이 버튼을 클릭하면 '글리프 플러스'가 '글리프콘 - 마이너스'로 바뀌고 다시 클릭하면 '글리프 플러스 플러스'가 나타납니다. '. 토글 가능해야합니다. 나는 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'; 
    } 
    } 
    ...... 

} 

내 생각에 항상 내 구성 요소의 상태를 반영하여 각도로 표시합니다. 그래서 시각적으로 사물을 바꾸고 싶다면 바인딩 시스템을 사용하여 내 뷰의 변수 부분을 내 구성 요소의 속성에 바인딩하고 구성 요소 속성을 변경하여 원하는 뷰를 반영하십시오.