Question

我希望当我点击此按钮时，＆＃39; glyphicon-plus＆＃39;改为＆＃39; glyphicon-minus＆＃39;当我再次点击时，它将再次＆＃39; glyphicon-plus＆＃39;。我想它应该是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';
     }
   }
  ......

 }

总是在Angular中以这种方式思考问题 - 我的观点反映了我的组件状态。因此，如果我想要直观地改变事物，使用绑定系统将视图的可变部分绑定到我的组件的属性，只需更改组件属性以反映我想要的视图。

单击角度2中的按钮更改字形图标

1 个答案: