Typescript 如何使用angular5编辑表中的特定行？

我的组件中有一个具有多条记录的表。我想在单击表中的“编辑”按钮时编辑特定行。但当它被设置为“使所有行都可编辑”时

我的桌子是这样的

我有一张有多行的桌子。当我单击表中的编辑按钮时，它会使表中的所有行都可编辑。这是我在stackblitz的代码

当我点击编辑按钮使所有行都可编辑时

---

我只希望单击行可编辑。如何进行编辑？

我要做的是在每行上设置一个属性，以指示是否正在编辑，如下所示：

不想点击的人的代码

Html

<table class="table table-hover">
  <thead>
    <tr>
      <th>Domain</th>
      <th>Registered Date</th>
      <th>Action</th>
    </tr>
    <tr *ngFor="let domain of domains; let i = index">
      <td>
        <span *ngIf="!domain.editable">{{domain.name}}</span>
        <input type="text" class="form-control" [(ngModel)]="domain.name" *ngIf="domain.editable"/>
      </td>
      <td>
        <span *ngIf="!domain.editable">{{domain.reg_date}}</span>
         <input type="date" class="form-control" [(ngModel)]="domain.reg_date" *ngIf="domain.editable"/>
      </td>
      <td><button class="btn btn-primary" (click)="editDomain(domain)">Edit</button></td>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

如您所见，我已将

editable

属性添加到

domains

数组中，当按钮单击触发

editDomain

get时，将为对象设置该属性

---

事件使用

editable

属性，您可以更改视图以显示每行的输入。

我要做的是在每行上设置一个属性，以指示是否正在编辑，如下所示：

不想点击的人的代码

Html

<table class="table table-hover">
  <thead>
    <tr>
      <th>Domain</th>
      <th>Registered Date</th>
      <th>Action</th>
    </tr>
    <tr *ngFor="let domain of domains; let i = index">
      <td>
        <span *ngIf="!domain.editable">{{domain.name}}</span>
        <input type="text" class="form-control" [(ngModel)]="domain.name" *ngIf="domain.editable"/>
      </td>
      <td>
        <span *ngIf="!domain.editable">{{domain.reg_date}}</span>
         <input type="date" class="form-control" [(ngModel)]="domain.reg_date" *ngIf="domain.editable"/>
      </td>
      <td><button class="btn btn-primary" (click)="editDomain(domain)">Edit</button></td>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

如您所见，我已将

editable

属性添加到

domains

数组中，当按钮单击触发

editDomain

get时，将为对象设置该属性 事件使用可编辑属性，您可以更改视图以显示每行的输入。

使用该行的索引

数据中的可编辑属性通常不可用

使用行的索引

数据中的可编辑属性通常不可用

---

我不想添加其他密钥。那么解决办法是什么呢？谢谢你的帮助。我没有添加任何键就完成了：）您是如何完成的？通过放置条件

*ngIf=“domain.\u id===editId”

。在编辑时，我设置editId=domain.idI不想添加额外的密钥。那么解决办法是什么呢？谢谢你的帮助。我没有添加任何键就完成了：）您是如何完成的？通过放置条件

*ngIf=“domain.\u id===editId”

。在编辑时，我设置editId=domain.\u id