如何在表td中添加新类?

Question

我的表格结构如下。我想在 td 下一个使用班级配置文件添加一个新类，并在单击按钮时删除上一个类。我知道如何使用jquery来做到这一点，但我正在尝试角度4。有人可以帮助我吗？

<table>
<tr>
<td></td>
<td class="profile"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="profile"></td>
<td></td>
</tr>
<tr>
<td class="profile"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="profile"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Answer 1

您需要使用 ngClass 来添加类。 例如：

<button [ngClass]="{'b1': button1Class}" 
(click)="button1Clicked()">asdasd</button>
<button [ngClass]="{'b2': button2Class}" 
(click)="button2Clicked()">bbbbbb</button>
//In Your Typescript
button1Class = false;
button2Class = false;
button1Clicked() {
this.button1Class = !this.button1Class;
}
button2Clicked() {
this.button2Class = !this.button2Class;
}
//In your css
.b1 {
background-color: red;
}
.b2 {
background-color: yellow;
}

你可以玩这个。

Answer 2

您可以在打字稿中操作 DOM 元素。我提供了最简单的例子来说明你怎么能做到这一点。

单击按钮时，获取具有"profile"类名的所有元素的列表。循环遍历它们以首先将类分配给下一个同级，然后将其从现有 td 中删除。

文件组件.html

<button (click)="btnClick()">click</button>

file.component.ts

btnClick(){
let elements: HTMLCollectionOf<Element> =  
document.getElementsByClassName("profile");
for(let i=0; i<= elements.length-1; i++){
elements[i].nextSibling.className = "profile";
elements[i].className = "";
}
}