如何在角度應用程序中為選定的墊子按鈕設置樣式

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）所以可能需要一些調整。