如何隐藏表格非活动编辑行的按钮

Question

我有一个可内联编辑的表格，当我单击特定行的编辑按钮时，我想隐藏所有其他行的“编辑”和“删除”按钮。我尝试使用当前索引，但它对我不起作用。当我点击addNew 按钮时也是如此

<a (click)="addNew()" class="mb-1 ml-1">Add New</a>
<table class="row-border table-bordered-no-confilct border-1 table">
  <thead>
    <tr>
      <th *ngFor="let head of headers">
        {{ head.name }} <span class="text-danger" *ngIf="head.required">*</span>
      </th>
    </tr>
  </thead>

  <tr *ngFor="let tableData of data; let i = index">
    <td>
     
       <div *ngIf="i">
            <i
            class="ace-icon fa fa-pencil-square-o bigger-150 text-success"
            data-toggle="tooltip"
            title="Edit"
            *ngIf="!tableData.isEditable"
            (click)="onEdit(tableData)"
          ></i>
          <i
            class="ace-icon fa fa-trash-o bigger text-danger ml-1"
            data-toggle="tooltip"
            title="Delete"
            *ngIf="!tableData.isEditable"
            (click)="onDelete(tableData)"
          ></i>
       </div>
      
        <i
        class="ace-icon fa fa-floppy-o bigger-150 text-success"
        data-toggle="tooltip"
        title="Save"
        *ngIf="tableData.isEditable"
        (click)="onSave(tableData)"
      ></i>
      <i
        class="ace-icon fa fa-times bigger-150 text-danger ml-1"
        data-toggle="tooltip"
        title="Cancel"
        *ngIf="tableData.isEditable"
        (click)="cancel(tableData, i)"
      ></i>

     
    </td>
    <td>{{ i + 1 }}</td>
    <ng-container *ngIf="tableData.isEditable; else viewable">
      <ng-container *ngFor="let head of headers">
        <ng-container *ngIf="head.mappedProperty">
          <td>
            <input
              *ngIf="
                head.dataType === 'text' ||
                head.dataType === 'number' ||
                head.dataType === 'checkbox'
              "
              [type]="head.dataType"
              [(ngModel)]="tableData[head.mappedProperty]"
              [checked]="tableData[head.mappedProperty]"
            />
          </td>
        </ng-container>
      </ng-container>
    </ng-container>

    <ng-template #viewable>
      <ng-container *ngFor="let head of headers">
        <ng-container *ngIf="head.mappedProperty">
          <td>{{ tableData[head.mappedProperty] }}</td>
        </ng-container>
      </ng-container>
    </ng-template>
  </tr>
</table>

ts

  onEdit(data): void {
    this.isNew = false;
    this.copyOfOriginalData = { ...data };
    this.data.map((item) => {
      item.isEditable = data.id === item.id;
    });
  }

Answer 1

您好，您可以简单地使用 *ngIf 并在数据数组中添加属性“buttonStatus”，或者您可以使用 IsEditable 属性。
下面是我的示例代码，与您的非常相似->

<table class="style">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>email</th>
        <th></th>
    </tr>
    <tr *ngFor="let item of row; let i = index">
        <td><input type="text" ></td>
        <td><input type="text" ></td>
        <td><input type="text"></td>
        <td *ngIf="item.buttonStatus==true"> <button (click) = "deleteRow(i)"><i class="fa fa-trash"></i></button>
            <button (click)="editTable(i)">Edit</button>
            <button (click)="editDone()">Done</button>
        </td>
    </tr>
</table>

TS：

 row = [
{
  id: "",
  name: "",
  email: "",
  buttonStatus: true
},
{
  id: "",
  name: "",
  email: "",
  buttonStatus: true
},
{
  id: "",
  name: "",
  email: "",
  buttonStatus: true
}
];

editTable(x) {
//Setting Only One row's Buttons Active
for(let  i=0;i< this.row.length;i++){
  console.log(x);
  if(i==x)
  { 
    this.row[i].buttonStatus=true;
  }
  else
  {
      this.row[i].buttonStatus=false;
  }
}
// DO your Edit DATA Code here
//{
//}
}
editDone(){
  //Setting All Button Active
  for (let i = 0; i < this.row.length; i++) {
   this.row[i].buttonStatus = true;
  }
}

注意：请查看 StackBlitz 中的代码：Link
如果您仍然需要帮助，请发表评论。

Answer 2

为每个 tableData 元素引入一个新属性，例如 shouldShowBtns，并在 tableData 中相应地设置该值并使用 [hidden]="!shouldShowBtns 属性。

[hidden] 属性可以添加到任何 HTML 元素中。