Html 我有一个表，其中有maticon按钮点击按钮后，它应该显示在表的末尾2个按钮

我有一个表，其中有垫图标按钮后，点击按钮，它应该显示在表的末尾2个按钮。 如果我点击按钮，它将颜色从主颜色链接到红色，现在我想为这个按钮添加两个按钮，我的意思是，在表格复杂化后点击末尾的按钮，它应该显示编辑和保存按钮。我想知道当我们点击mat图标按钮时，如何将这两个按钮添加到表的末尾。 请帮我做这些。 谢谢

{{data.name} {{data.id} 去掉你的圆圈

---

您可以使用已经实现的data.isClicked属性来处理其他按钮的可见性。如果它们只应可见，如果单击第一个按钮，请按如下方式操作：

<tr*ngFor="let data of database ">
  <td>{{data.name}}</td>
  <td>{{data.id}}</td>
  <td>
    <button mat-icon-button color="primary" (click)="data.isClicked = !data.isClicked"  [ngClass]="{'myClass': data.isClicked}">
      <mat-icon>remove_circle</mat-icon>
    </button>
  </td>
  <td *ngIf="data.isClicked">
   <button>Edit<button>
   <button>Save<button>
  </td>
<tr>

---

不，实际上，在点击删除圆圈按钮后，这个编辑和保存按钮应该显示在同一页中，但在表格完成后不会显示在表格中。啊，我想我看到了你想要的。在我的答案中检查我的编辑。

<tr*ngFor="let data of database ">
  <td>{{data.name}}</td>
  <td>{{data.id}}</td>
  <td>
    <button mat-icon-button color="primary" (click)="clickEvent(data)"  [ngClass]="{'myClass': data.isClicked}">
      <mat-icon>remove_circle</mat-icon>
    </button>
  </td>
<tr>

<div*ngIf="showButtons">
   <button>Edit<button>
   <button>Save<button>
</div>

showButtons: boolean = false;
clickEvent(data){
  data.isClicked = !data.isClicked;
  this.showButtons = !this.showButtons;
}