Angular Material动态切换按钮样式：属性绑定生效但样式未应用

mat-raised-button 和 mat-stroked-button 是Angular Material的属性型指令，而非普通HTML属性。你用 [attr.mat-raised-button] 这类方式只是在DOM元素上添加了属性，但Angular不会在运行时重新解析这些指令，所以对应的样式和组件行为不会被应用。

推荐两种简单可行的实现方式：

方式一：使用*ngIf分别渲染按钮 #

根据myValue的布尔值条件渲染对应按钮类型，逻辑清晰易维护：

<button *ngIf="!myValue" mat-raised-button color="primary">
  ButtonTitle
</button>
<button *ngIf="myValue" mat-stroked-button color="primary">
  ButtonTitle
</button>

方式二：使用ngSwitch（适配多类型切换场景） #

如果后续需要扩展更多按钮类型（如mat-flat-button），ngSwitch的扩展性更强：

<ng-container [ngSwitch]="myValue">
  <button *ngSwitchCase="false" mat-raised-button color="primary">ButtonTitle</button>
  <button *ngSwitchCase="true" mat-stroked-button color="primary">ButtonTitle</button>
</ng-container>

补充说明 #

如果必须在同一个按钮元素上动态切换指令（不推荐，复杂度较高），可以通过ViewChild结合Renderer2手动添加/移除指令，但这种方式需要处理指令初始化逻辑，远不如前两种方式简洁可靠。

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