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>

Screenshot displaying the template

Answer 1

使用ngClass，例如：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

它会一次改变其中一个

stackblitz demo link