Angular 2更改按钮样式onClick

我在尝试更新单击按钮样式时遇到了很多麻烦。Angular 2更改按钮样式onClick

首先，这里是原来的标记：

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

单击按钮时，我想：

变化从"btn btn-add"的类"btn btn-remove"
更改<i class="fa fa-plus-circle">至<i class="fa fa-minus-circle">

我怎样才能做到这一点的角度2？现在我只是添加了一个布尔值并将其翻转，并根据该值显示不同的模板。但是，似乎应该有办法通过一些功能来处理这个问题吧？在文档中说它可以使用由多个类的空格分隔的字符串，但我不知道如何做到这一点。

来源

2016-09-11 user1354934

你有至少尝试过的东西吗？或者看看文档？ – lexith

是啊，我看了文档https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html。它说你可以使用多个由空间分隔的类，但我无法得到它的工作:( – user1354934

在你的评论说，您尝试ngClass但与它的麻烦：

该指令愿与类名作为密钥和布尔对象表达为价值。如果表达式为真，则添加该类，否则将被删除。

例如您的按钮具有类btn，并应具有取决于一个布尔值要么btn-add或btn-remove，可能比你做这样的事情：

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

希望这有助于在你的ngClass了解，那么在其他用例上使用它不会有问题。

来源

2016-09-11 19:05:56 lexith

谢谢！但我想我的问题是，按钮是一个无序的列表，显示照片的一部分。是否有可能只改变类为一个特定的照片，添加？对不起，我真的很困惑angualr 2 :(因为现在当我添加1张照片，它会改变所有的样式 – user1354934

这是一个不同的问题:)没有任何示例代码很难给出答案当然，例如，如果你谈论一个'ngFor'：而不是使用你的组件的属性，你可以直接使用你的照片对象的属性来决定按钮应该属于哪个类 – lexith

thx。我想我会添加在REDX作为一个国旗点击添加，添加=真 – user1354934

你可以试试这个代码：

<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>

来源

2016-09-11 19:04:50 yurzui

要切换按钮的文本太：

<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>

来源

2017-12-04 23:01:34 Stacked

Angular 2更改按钮样式onClick

回答

相关问题