如何更改 Angular 6 中的按钮状态？

Question

我是 Angular 6 的新手，我的网站包含一个部分，其中显示一组动态形成的按钮，如下所示

<button class="card-button" *ngFor="let env of product.env" name="button">{{env.name}}</button>

另外，我想显示默认选择的按钮的不同边框

button:focus {
      border-bottom: 4px solid #CC292B;
      color: #CC292B;
}
button{
      border-bottom: 4px solid green;
      color: green;
}

现在，如果按钮被选中，它应该出现，color: #CC292B;否则为绿色。通过上面的CSS，我能够完成任务。现在我希望默认选择第一个按钮，即第一个按钮应该color: #CC292B;以绿色显示并以绿色显示，我该如何实现？提前致谢

Answer 1

使用ngClass以实现：

<button class="card-button" *ngFor="let env of product.env; let i = index" [ngClass]="[i == 0 ? 'button-active' : 'button-standard']" name="button">{{env.name}}</button>

你可以拥有这种 css

.button-active{
color:red;
}

.button-standard{
color: green;
}