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

Question

我有一个 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>

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

任何帮助将非常感激。

Answer 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;
}

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