Angular 如何将图标从一个td移动到另一个td

我在表格的按钮中有一个图标。我想在单击按钮时将此图标移动到下一个td。我不知道怎么用英语做这件事

<table border="1px">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><i class="fa fa-arrow-right"></i></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

---

有很多方法可以实现这一点，但最简单的方法就是在一个地方隐藏图标，在另一个地方显示

例如：

<table border="1px" (click)="clicked()">
    <tr>

      <td [ngClass]="{'random': counter == 0}">www</td>
      <td [ngClass]="{'random': counter == 1}">www</td>
      <td [ngClass]="{'random': counter == 2}">www</td>
      <td [ngClass]="{'random': counter == 3}">www</td>

    </tr>
    <tr>
        <td>yyyyy</td>
        <td>yyyyy</td>
        <td>yyyyy</td>
        <td>yyyyy</td>
    </tr>
</table>

// In your typescript
  counter = 0;
  clicked() {
    this.counter < 4? this.counter++: this.counter = 0;
  }

//In your css
.random {
  background-color: green;
}

---

对于第一个tr，有4个tds。假设第一个td为A类，点击按钮，该类应转移至第二个td，再次点击转到第三个td，直到到达第四个td