Angular 4通过ID更改CSS

Question

我正在尝试使用vanilla js？

通过元素ID更改CSS属性？

我正在尝试达到以下效果：

1. 单击第一个按钮在底部的底部，顶部的第一个按钮应将其类别从btn-dark更改为btn-warning。
2. 其余按钮应遵循相同的模式：＃B2单击应导致＃D2从btn-dark更改为btn-warning。

我当前的尝试：

<div class="row">
    <button *ngFor="let number of [1,2,3,4,5,6,7,8,9,10]" 
    type="button" 
    class="btn btn-dark"
    id="d{{number}}" 
    >
    </button>
</div>
<div class="row">
    <button (click)="onClick($event)" 
    *ngFor="let number of [1,2,3,4,5,6,7,8,9,10]" 
    type="button" 
    class="btn btn-secondary" 
    id="b{{number}}">{{number}}
    </button>
</div>

屏幕截图显示模板

Answer 1

使用ngclass，例如：

<button [ngClass]="{'btn-dark': true}">...</button>

Answer 2

尝试像这样

它会一次更改其中一个

Stackblitz演示链接