时间戳

首页 > 解决方案 > Angular - 单击动态按钮列表更改按钮样式

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

问题描述

我想在单击 1 个按钮时制作按钮的动态列表，它的样式应该改变，我不知道如何使它工作，例如： 在此处输入图像描述

每当我们单击其中一个按钮时，只有该按钮样式会发生变化。知道如何进行这项工作吗？加上这里是一个使用类似工作的链接仍然没有得到想法。

标签： angularangular-material

解决方案

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

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的工作演示中的详细信息。

推荐阅读