css - 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 ，例如:

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