Question

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

<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添加类。对于Ex：

<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;
}

You can play with this.

Answer 2

您可以操纵打字稿中的DOM元素。我提供了最简单的示例。

单击按钮，获取具有“配置文件”类名称的所有元素的列表。循环遍历它们，以将该类分配给下一个同级兄弟，然后将其从现有td中删除。

file.component.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 = "";
        }
      }

如何在表td中添加新类？

2 个答案: