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

Question

我希望当我单击此按钮时，“glyphicon-plus”变为“glyphicon-minus”，当我再次单击时，它会再次“glyphicon-plus”。 我想要它应该是可切换的。我不想在 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 中总是这样想——我的观点是我的组件状态的反映。因此，如果我想在视觉上进行更改，请使用绑定系统将视图的可变部分绑定到组件的属性，然后更改组件属性以反映我想要的视图。