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

Question

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

组件.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>

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

组件.ts：

arrowDown(){
this.isGoldUp = false;
}

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

Answer 1

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

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

组件.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>

组件.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;
  }
}

我希望这会有所帮助。