如何在角度应用程序中设置选定的垫子按钮的样式答案

【问题标题】：how to style a selected mat-button in an angular application如何在角度应用程序中设置选定的垫子按钮的样式
【发布时间】：2020-11-24 00:37:50
【问题描述】：

我有一个 Angular 应用程序，其中用户有多个按钮选择，当按下按钮时，另一个组件将显示。组件取决于用户的选择。我正在尝试实现的一件事是按钮的样式，以明确选择了哪个选项。

<div  fxLayout="row" fxLayoutAlign="space-between center" fxFill>
<div *ngFor="let button of buttons">
    <button
        mat-stroked-button
        *ngIf="button.type === 'button'"
        (click)="buttonPressed()"
        ngxScrollTo
    >
        {{ button.text }}
    </button>
</div>

<div  fxLayout="row" fxLayoutAlign="space-between center">
    <div *ngIf="item.hasSomeProperty | isTypeButton">
        <button mat-mini-fab (click)="buttonPressed()">
            <mat-icon>close</mat-icon>
        </button>
    </div>
</div>

我还附上了一张我试图在这里实现的目标的图片：

任何帮助将不胜感激。

【问题讨论】：

在 Codesandbox 上创建一个工作演示，您将获得更好的帮助。

标签： html css angular angular-material angular-material2

【解决方案1】：

只需使用[ngClass] 或[ngStyle]：

<div *ngFor="let button of buttons">
    <button
        mat-stroked-button
        *ngIf="button.type === 'button'"
        [ngClass]="{'disabledButton': !button.selected}"
        (click)="buttonPressed(button)"
        ngxScrollTo
    >
        {{ button.text }}
    </button>
</div>

假设您的按钮模型包含“selected”属性（或者您有一些其他模型存储实际单击了哪个按钮的信息）：

buttonPressed(button: Button) {
    // Mark only button as selected
    this.buttons.forEach(b => b.selected = b === button);
}

当然还要在 css 中添加一些类：

.disabledButton {
     opacity: 0.75;
}

注意 - 从我的头上写这个（因为没有提供堆栈闪电）所以可能需要一些调整。

【讨论】：