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

Posted 2023-03-06

【中文标题】使用Angular中的单击事件动态更改ngStyle

【英文标题】：Dynamically change ngStyle with click event in Angular

【发布时间】：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 样式，因此不会更改颜色。 有人知道我在做什么错吗？提前致谢！

【参考方案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;
  

我希望这会有所帮助。