Angular - 单击动态按钮列表时更改按钮样式

Question

我想在点击 1 个按钮时制作动态的按钮列表，它的样式应该改变，我不知道如何进行这项工作 例如：

当我们点击这些按钮之一时，只有按钮样式会改变。知道如何进行这项工作吗？ 此外，还有一位 link 正在使用类似的工作，但仍然不明白。

Answer 1

如果您想要完全动态，则创建一个按钮名称数组。

buttons = ['Button 1', 'Button 2', 'Button 3'];

以及所选按钮的变量，并将第一个按钮指定为已选择。

selectedButton: string = this.buttons[0];

创建一个函数来检查所选按钮。

isButtonSelected(button: string) {
    return button === this.selectedButton;
}

添加 switchButton 函数来切换您的选择。

switchButton(button: string) {
   this.selectedButton = button;
}

在 HTML 中迭代您的按钮：

<ng-container *ngFor="let button of buttons">
    <button mat-button [ngClass]="{'mat-raised-button':isButtonSelected(button)}" (click)="switchButton(button)">{{button}}</button>
</ng-container>

您现在可以根据需要将 mat-raised-button 更改为任何其他按钮类型。

在 StackBlitz 处查看工作演示的详细信息。