Angular中如何在*ngFor循环内使用[ngStyle]为选中按钮设置专属样式？

我一眼就看出问题所在啦——你的模板和逻辑里的样式绑定没对应上！

问题根源 #

你在模板里给所有按钮绑定的是[ngStyle]="buttonStyles"，这个buttonStyles是组件类里的一个全局变量，但在changeNgStyle()方法里，你却把样式赋值给了selectedButton.buttonStyles（选中按钮对象的一个属性）。这俩完全不是同一个东西，Angular自然不会把样式应用到按钮上，而且因为没有语法错误，所以也不会报错。

修复方案（两种可选） #

方案一：让每个按钮绑定自身的样式属性

这种方式适合需要给每个按钮单独存储专属样式的场景：

1. 修改模板：把[ngStyle]的绑定改成当前按钮对象的buttonStyles属性：

<div *ngFor="let button of buttons;">
  <button class="button" 
          [class.selected]="button === selectedButton" 
          [ngStyle]="button.buttonStyles" 
          (click)="selectButton(button)">
    {{button.text}}
  </button>
</div>
<button (click)="changeNgStyle()">changeNgStyle</button>

2. 确保按钮对象初始有样式属性：在初始化buttons数组时，给每个按钮添加空的buttonStyles（避免后续赋值时报错）：

// 组件类里的buttons初始化示例
buttons = [
  { text: '按钮A', buttonStyles: {} },
  { text: '按钮B', buttonStyles: {} },
  { text: '按钮C', buttonStyles: {} }
];

selectedButton?: any;
selectButton(button): void { 
  this.selectedButton = button; 
} 
changeNgStyle() { 
  // 加个判断，防止没选中按钮时调用方法报错
  if (!this.selectedButton) return;
  
  this.selectedButton.buttonStyles = { 
    'color':'blue', 
    'font-weight':'bold', 
    'background-color': 'red' 
  }; 
}

这样修改后，当你点击changeNgStyle按钮时，Angular会检测到选中按钮对象的buttonStyles属性变化，自动更新对应的按钮样式。

方案二：维护全局选中样式变量

如果不需要给每个按钮单独存样式，只是想给选中的按钮应用统一的动态样式，可以用这种更简洁的方式：

1. 修改模板：只有选中的按钮才绑定全局的选中样式变量，其他按钮用空对象：

<div *ngFor="let button of buttons;">
  <button class="button" 
          [class.selected]="button === selectedButton" 
          [ngStyle]="button === selectedButton ? selectedButtonStyles : {}"
          (click)="selectButton(button)">
    {{button.text}}
  </button>
</div>
<button (click)="changeNgStyle()">changeNgStyle</button>

2. 调整组件逻辑：新增一个selectedButtonStyles变量来存储选中按钮的样式：

selectedButton?: any;
// 初始为空样式
selectedButtonStyles: Record<string, string> = {};

selectButton(button): void { 
  this.selectedButton = button; 
} 
changeNgStyle() { 
  this.selectedButtonStyles = { 
    'color':'blue', 
    'font-weight':'bold', 
    'background-color': 'red' 
  }; 
}

这个方案更轻量，不需要给每个按钮对象添加额外属性，适合只需要给当前选中按钮动态改样式的场景。

内容的提问来源于stack exchange，提问作者dawphin777