如何使用 [ngStyle] 將樣式應用於 *ngFor 中的選定元素？

Question

我將有多個按鈕，並且需要使用 forms 來設置按鈕樣式。 每個按鈕應該能夠得到自己特定的 styles。 在下面的示例中，我嘗試單擊列表中的一個按鈕到 select 它，然后單擊一個單獨的按鈕以使用[ngStyle]將 styles 應用於所選按鈕。 到目前為止，一切似乎都在工作，除了沒有應用通過[ngStyle]的新 styles 並且我沒有看到任何錯誤。

<div *ngFor="let button of buttons;">
    <button class="button" [class.selected]="button === selectedButton" [ngStyle]="buttonStyles" (click)="selectButton(button)">{{button.text}}</button>
</div>

<button (click)="changeNgStyle()">changeNgStyle</button>

selectedButton?;

selectButton(button): void {
    this.selectedButton = button;
}

changeNgStyle() {
    this.selectedButton.buttonStyles = {
        'color':'blue', 
        'font-weight':'bold',
        'background-color': 'red'
    };
}

Answer 1

由於我看不到您的 ts 代碼中聲明的任何buttonStyles ，請嘗試以下操作：

[ngStyle]="selectedButton?.buttonStyles"

所以，你的 html 應該是這樣的：

<button class="button" [class.selected]="button === selectedButton" [ngStyle]="selectedButton?.buttonStyles" (click)="selectButton(button)">{{button.text}}</button>

Answer 2

問題不是很清楚，但似乎樣式包含在selectedButton變量的buttonStyles屬性中。 那么ngStyle不應該綁定到selectedButton.buttonStyles嗎？

嘗試以下

<button 
  class="button" 
  [class.selected]="button === selectedButton" 
  [ngStyle]="selectedButton.buttonStyles" 
  (click)="selectButton(button)"
>{{button.text}}</button>