Angular 4通过id更改css答案

【问题标题】：Angular 4 change css by idAngular 4通过id更改css
【发布时间】：2017-11-29 02:00:00
【问题描述】：

我正在尝试使用 vanilla JS 按元素 ID 更改 CSS 属性？

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

单击底部底部的第一个按钮后，顶部的第一个按钮应将其类从btn-dark 更改为btn-warning。
其余按钮应遵循相同的模式：单击#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

【问题讨论】：

标签： css angular styles

【解决方案1】：

使用ngClass，例如：

&lt;button [ngClass]="{'btn-dark': true}"&gt;...&lt;/button&gt;

【讨论】：

是的，但适用于所有#d 元素。我想换一个
分别为每个按钮添加ngClass

【解决方案2】：

这样试试

它会一次改变其中一个

stackblitz demo link

【讨论】：

非常感谢！我不知道它这么简单。这是我使用 Angular 的第一步。