Question

我想在点击按钮时根据布尔值更改按钮的颜色，图标和文本。意味着如果我点击活动按钮，它应该变为deactive，颜色应该从btn-suceess变为btn-danger，图标从fa-ban变为fa-check。

<button [hidden]= "user.active" [ngClass]="{ 'btn-danger': user.active, 'btn-success': !user.active}" (click) ="click()">
  <i [ngClass]="{'fa-ban': user.active, 'fa-check': !user.active}" class="fa"> </i>
    {{ text }}
</button>

然后在.ts文件中我有两个方法，我添加了一个这样的方法：

deactivate(user){
  this.user.active = true;
  this.userService.userStatus(this.user).subscribe(
    user => {
      console.log(user);
     },
    err => {
     console.log('err:', err);
    }
  );
  };

activate(user){
 this.user.active = false;
 this.userService.userStatus(this.user).subscribe(
  user => {
     console.log(user);
  },
  err => {
    console.log('err:', err);
  }
  );
};

click() {
  if (this.user.active) {
      this.user.active = false;
      this.text = "Active";
  } else {
      this.user.active = true;
      this.text = "Deactive";
   }
}

现在我只能更改文本，但现在值不会在db中更新，并且图标和按钮颜色也不会更改。

Answer 1

你以错误的方式去做。您的模板应该只包含该按钮一次。它应该是这样的：

<button [ngClass]="{'btn-danger':user.active, 'btn-success':!user.active}"
        (click)="click()">
  <i [ngClass]="{'fa-ban':user.active, 'fa-check':!user.active}" class="fa"> </i>
  {{text}}
</button>

这个组件是这样的：

export class MyComponent {
    user = { active: true };
    text = "Deactive";

    click() {
        if (this.user.active) {
            this.user.active = false;
            this.text = "Active";
        } else {
            this.user.active = true;
            this.text = "Deactive";
        }
    }

请注意，我没有使用$ event.target直接访问DOM元素。使用Angular时，尽量避免这种情况。我的示例向您展示了如何使用Angular更改按钮和图标的文本和类。

让我知道这对你有用。

由于更新后的OP编辑：

我创建了一个带有工作示例的Plunker。我不得不删除按钮上的[禁用]，因为显然可以防止在禁用按钮时发出（单击）事件（有意义）。但它仍然很好地展示了如何以Angular方式更改颜色和文本：

https://plnkr.co/edit/VxxoUeSHrP0I8lyMiVNK

只需点击该链接即可点击黑色＆＃34;运行＆＃34;顶栏中的按钮。

Answer 2

既然您正在使用引导程序，为什么不使用引导按钮切换而不是重新发明轮子？

https://v4-alpha.getbootstrap.com/components/buttons/

Answer 3

在ts文件中添加变量以进行检查

clickActive:Boolean = false;

in html

<button [hidden]= "user.active == false" 
[ngClass]="(state == true) ? 'btn-success':'btn-danger'"
(click) ="activation(user, $event.target, 'Deactive')">
  <i [ngClass]="(state == true) ? 'fa fa-ban':'fa fa-check'"> </i>
   Active
</button>

请勿忘记在点击按钮时更改状态

this.clickActive = !this.clickActive;

更改Angular2中的按钮颜色，图标和文本

3 个答案: