如何将ng-class用于按钮数组，以便为​​每个按钮提供单独的条件

Question

我有一个简单的问题陈述。我必须使用3个按钮组成的数组，并且在单击每个按钮时，页面的背景应该发生变化。这应该以纯角型脚本完成（不能使用javascript函数）。我只知道我必须使用ng-class为按钮提供条件，但是我不确定如何。我已经成功地制作了一个由三个按钮组成的阵列，但是现在我陷入了困境。请协助解决。下面是我的component.ts代码

buttons = [
{
  name: 'Red',
  id: 'btn1'
},
{
  name: 'Green',
  id: 'btn2'
},
{
  name: 'Blue',
  id: 'btn3'
}
];

getColor(id) {
switch (id) {
  case 'btn1':
    return 'red';
  case 'btn2':
    return 'green';
  case 'btn3':
    return 'blue';
}
}

下面是我尝试过的html代码。

<div *ngFor="let button of buttons">
  <button [ngStyle]="{'background-color':getColor(button.id)}">
  {{ button.name }}</button>
</div>

我使用了ng样式，但是没有按预期工作。请使用ng-class向我建议解决方案。

Answer 1

如下更新您的HTML页面

<div [ngStyle]="{'background-color': color}">
    <hello name="{{ name }}"></hello>
     <p>Start editing to see some magic happen :)
     </p>
    <div *ngFor="let button of buttons">
     <button (click)="color=button.name" >
    {{ button.name }}</button>
  </div>
</div>

Answer 2

在您的情况下，您可以直接在内置CSS中提供button.name

<div *ngFor="let button of buttons">
  <button [ngStyle]="{'background-color': button.name}">
  {{ button.name }}</button>
</div>

您还可以检查链接

https://stackblitz.com/edit/angular-ufnq8p?file=src%2Fapp%2Fapp.component.html

Answer 3

  

您的用例的工作演示   https://stackblitz.com/edit/create-xgn8sa?file=app%2Fapp.component.ts