使用Angular中的单击事件动态更改ngStyle答案

【问题标题】：Dynamically change ngStyle with click event in Angular使用Angular中的单击事件动态更改ngStyle
【发布时间】：2021-06-04 10:53:49
【问题描述】：

我希望在单击不同按钮时更改元素的颜色，但我似乎找不到不断检查我的布尔值的解决方案。这是我的代码：

component.ts:

ngOnInit():void{
if(this.upvotes.includes(this.user.id?)){
      this.isGoldUp = true;
    }
}

HTML：

<span (click)="arrowUp()" [ngStyle]="{'color': isGoldUp? '#00aeff' : '#000000'}" > </span>
<span (click)="arrowDown()"> </span>

到目前为止，代码都可以正常工作。当组件加载时，它会检查他们是否喜欢评论并相应地更改颜色。但是，如果我按下箭头，我希望颜色也会改变。

component.ts:

arrowDown(){
this.isGoldUp = false;
}

这确实会更新布尔值，但不会更新 ng 样式，因此不会更改颜色。有人知道我在做什么错吗？提前致谢！

【问题讨论】：

标签： angular dynamic ng-style

【解决方案1】：

我认为这是一个语法错误。我在这里应用了它，它正在工作

https://angular-ivy-ry9fyj.stackblitz.io

component.html

<span 
  title="Click to upvote" 
  (click)="arrowUp()" 
  [ngStyle]="{'color': isGoldUp ? '#00aeff' : '#ff0000'}"
>
  Upvote
</span>
<span 
  title="Click to downvote" 
  (click)="arrowDown()"
>
  Downvote
</span>

<br>

<p>
  Vote: {{isGoldUp ? 'Upvoted' : 'Down voted'}}
</p>

component.ts

export class AppComponent {
  name = "Angular " + VERSION.major;
  isGoldUp = false;
  upvotes: string[] = [];
  user: any;

  ngOnInit(): void {
    if (this.upvotes.includes(this.user.id)) {
      this.isGoldUp = true;
    }
  }

  arrowUp() {
    this.isGoldUp = true;
  }

  arrowDown() {
    this.isGoldUp = false;
  }
}

我希望这会有所帮助。

【讨论】：