Angular结合ASP.NET Core如何将选中按钮切换为primary按钮

你的现有业务逻辑已经打通了前后端选中状态同步，只需要在模板层基于后端返回的isSelected属性动态绑定按钮样式类即可，不需要改动现有传参逻辑。

• 移除模板中无用的[value]="answer.isSelected"绑定，该属性对按钮点击传参、状态切换没有实际作用
• 用Angular的[class.样式类名]语法，根据answer.isSelected的布尔值判断是否追加主按钮样式类
• 固定不变的通用样式类（比如间距类me-2、按钮基础类）直接写在原生class属性中即可，Angular会自动合并固定类和动态绑定类，不会出现样式覆盖问题

修改后的模板代码如下（示例默认使用Bootstrap样式规则，可根据自身项目使用的UI框架替换对应类名）：

<ng-container *ngIf="question.questionType == 4">
  <ng-container *ngFor="let answer of question.answers">
     <button 
         (click)="setanswer(answer.answerId)"   
         class="btn me-2" 
         [class.btn-primary]="answer.isSelected"
         [class.btn-outline-primary]="!answer.isSelected"
         name="{{ answer.answerId }}">
         {{ answer.answerDescription }}
     </button>
  </ng-container>
</ng-container>

注意事项 #

• 确保setanswer方法调用后端接口成功后，本地的question.answers数组已经同步为后端返回的最新状态，否则isSelected值不更新会导致样式不切换
• 如果是单选场景，后端更新选中状态时需要将同问题下其他非选中答案的isSelected属性置为false，避免出现多个按钮同时为primary主样式的问题
• 如果使用NG-ZORRO、Angular Material等第三方组件库，只需要把示例中的btn-primary、btn-outline-primary替换为对应组件库的主按钮类名、默认按钮类名即可，逻辑完全一致

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