Angular 5中如何禁用表格行？附用户列表表格HTML代码

要实现表格行的禁用（包括视觉样式和交互限制），可以按照以下步骤来修改你的代码：

1. 给用户数据添加禁用状态标记 #

首先，你的用户列表数据里需要一个布尔字段来标记是否禁用，比如isDisabled。假设你的用户数组结构大概是这样：

userList = [
  { nom: 'Jhon', prenom: 'Stone', email: 'jhonStone@gmail.com', isDisabled: false },
  // 其他用户数据...
];

2. 修改表格HTML代码 #

把硬编码的行改成*ngFor循环遍历用户列表，同时添加动态样式和交互控制：

<table class="table m-table m-table--head-bg-metal">
  <thead>
    <tr>
      <th> Nom </th>
      <th> Prénom </th>
      <th> Email </th>
      <th> Action </th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历用户列表，动态绑定禁用样式和交互状态 -->
    <tr *ngFor="let user of userList" 
        [ngClass]="{'disabled-row': user.isDisabled}"
        (click)="user.isDisabled ? null : handleRowClick(user)">
      <td>{{ user.nom }}</td>
      <td>{{ user.prenom }}</td>
      <td>{{ user.email }}</td>
      <td>
        <button class="btn btn-outline-danger m-btn m-btn--icon btn-sm" 
                [disabled]="user.isDisabled">
          删除
        </button>
        <!-- 其他操作按钮也一样加上[disabled]绑定 -->
      </td>
    </tr>
  </tbody>
</table>

3. 添加禁用行的CSS样式 #

在组件的样式文件（比如.component.css）里加入以下样式，让禁用的行视觉上更直观：

.disabled-row {
  background-color: #f0f0f0;
  opacity: 0.7;
  cursor: not-allowed;
  /* 要是想完全阻止行上的所有点击事件，可以加上这行 */
  /* pointer-events: none; */
}

/* 可选：给禁用行里的按钮再加层保护 */
.disabled-row .btn {
  pointer-events: none;
}

关键细节说明 #

• 视觉提示：通过[ngClass]动态给禁用行添加样式，改变背景色、透明度和鼠标样式，让用户一眼就能识别出禁用状态。
• 交互限制：给行内按钮绑定[disabled]属性，确保按钮无法触发操作；如果行本身有点击事件，可以在事件绑定里判断禁用状态，直接跳过逻辑执行。
• 业务适配：你可以根据实际需求来设置user.isDisabled的取值（比如用户是否被锁定、是否已归档等）。

内容的提问来源于stack exchange，提问作者antony