时间戳

首页 > 解决方案 > 将表格单元格转换为可编辑输入

html - 将表格单元格转换为可编辑输入

问题描述

我想创建一个有 2 列的表：Name, Email. 每次按 时edit button，我都想将 转换td为可编辑的输入。问题是，如果我有更多用户并且我按下编辑按钮，所有用户都将变为可编辑，而不仅仅是选定的用户。我怎么解决这个问题？

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of usersList">
      <td *ngIf="!editUser">{{ user.name }}</td>
      <td *ngIf="editUser"><input class=" form-control" size="1" type="text" [(ngModel)]="user.name"></td>

      <td *ngIf="!editUser">{{ user.email }}
      <td *ngIf="editUser"><input class=" form-control" size="1" type="text" [(ngModel)]="user.email"></td>

      <td *ngIf="!editUser">
        <a class="action-btn" (click)="onEdit()">
          <p class="material-icons pointer">edit</p>
        </a>
      </td>
    </tr>
  </tbody>
</table>

editUser: boolean = false
onEdit() {
  this.editUser = !this.editUser
}

按下红色按钮之前表格的外观 按下红色按钮之前表格的外观

按下按钮后表格的外观 按下按钮后表格的外观

感谢您的时间！（这就是我想要实现的

标签： htmlangular6

解决方案

你有用户的ID吗？

然后你可以做类似的事情：

<tbody>
  <tr *ngFor="let user of usersList">
    <td *ngIf="editUserId !== user.id">{{ user.name }}</td>
    <td *ngIf="editUserId === user.id"><input [(ngModel)]="user.name"></td>

    <td *ngIf="editUserId !== user.id">{{ user.email }}
    <td *ngIf="editUserId === user.id"><input [(ngModel)]="user.email"></td>

    <td *ngIf="editUser !== user.id">
      <a class="action-btn" (click)="onEdit(user.id)">
        <p class="material-icons pointer">edit</p>
      </a>
    </td>
  </tr>
</tbody>

和

editUserId: number;
onEdit(userId: number) {
  this.editUserId = userId;
}

推荐阅读