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

Question

我有一个表格，在单击按钮后有垫图标按钮，它应该在表格末尾显示 2 个按钮。 如果我单击按钮，它将颜色从原色链接到红色，现在我想为这个按钮设置 2 个按钮，我的意思是在表格复杂化后单击最后的按钮后，它应该显示按钮（编辑和保存）。我想知道当我们单击 mat-icon-button 时如何在表格的末尾添加 2 个按钮。 请在这些方面帮助我。 谢谢。

<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>
  <tr>

Answer 1

您可以使用已实现的 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>

---

编辑澄清后：

只需在 Click Mehtod 中组合您的操作即可：

您的 HTML 文件：

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

还有你的 .ts 文件：

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