Angular 表格中为单个行按钮独立显示加载 Spinner 的实现方法-html教程-PHP中文网

Angular 表格中为单个行按钮独立显示加载 Spinner 的实现方法

在 Angular Material 表格中，当多行共用同一个全局 loading 状态时，点击任一“更新”按钮会导致所有按钮 Spinner 同时激活。本文教你通过为每个数据项绑定独立的 isLoading 状态，实现仅目标行按钮显示 Spinner 的精准加载反馈。

在 angular material 表格中，当多行共用同一个全局 loading 状态时，点击任一“更新”按钮会导致所有按钮 spinner 同时激活。本文教你通过为每个数据项绑定独立的 `isloading` 状态，实现仅目标行按钮显示 spinner 的精准加载反馈。

要解决“点击某员工更新按钮时，所有按钮 Spinner 都旋转”的问题，关键在于将加载状态从全局变量（loading: boolean）下沉为每条数据的局部状态。这是因为表格中每一行代表一个独立实体（如 personel），其操作应具备状态隔离性——只有被触发更新的那一行才应显示加载指示器。

✅ 正确做法：为每个数据项添加独立 isLoading 属性

首先，确保你的 dataPersonel 数组中的每个对象都包含 isLoading: boolean 字段（初始值为 false）。你可以在数据初始化时统一设置，或在服务响应后动态补充：

// 示例：初始化数据时添加 isLoading 状态
this.dataPersonel = [
  { id: 1, name: 'Ali', surname: 'Yılmaz', date: new Date(), isLoading: false },
  { id: 2, name: 'Ayşe', surname: 'Kaya', date: new Date(), isLoading: false },
  // ...
];

? 更健壮的方案（推荐）：定义 TypeScript 接口明确结构：
interface Personnel {
  id: number;
  name: string;
  surname: string;
  date: Date;
  isLoading?: boolean; // 可选，便于兼容旧数据
}

? 模板中绑定行级状态

修改 HTML 模板，将 *ngIf 条件从全局 loading 切换为 personel.isLoading：

<td>
  <button mat-raised-button class="btn btn-info">
    UPDATE
    <mat-spinner color="primary" diameter="20"></mat-spinner></button>
</td>

⚠️ 注意：我们还添加了 [disabled]="personel.isLoading"，防止用户重复点击导致多次请求，提升用户体验与数据一致性。

? 组件逻辑：更新对应项的状态

在 updatePersonnel() 方法中，只操作当前 personel 对象的状态，而非全局变量：

updatePersonnel(personel: Personnel) {
  personel.isLoading = true;

  this.personelService.updatePersonel(personel).subscribe({
    next: (response) => {
      if (response === Constants.OK) {
        this.alertifyService.makeSuccess('Update successful');
      } else {
        this.alertifyService.makeError('Update failed');
      }
    },
    error: (err) => {
      this.alertifyService.makeError('Network or server error');
      console.error(err);
    },
    complete: () => {
      personel.isLoading = false; // 确保无论成功/失败都恢复状态
    }
  });
}

✅ 使用 subscribe({ next, error, complete }) 形式可确保 complete 回调（或 error 后）一定执行 personel.isLoading = false，避免 Spinner 卡死。

? 进阶建议：使用状态枚举提升可维护性

若未来需支持更多状态（如 idle、loading、success、error），可引入枚举：

enum PersonnelStatus {
  IDLE = 'idle',
  LOADING = 'loading',
  SUCCESS = 'success',
  ERROR = 'error'
}

// 数据项类型扩展
interface Personnel {
  // ...其他字段
  status?: PersonnelStatus;
}

模板中使用：*ngIf="personel.status === 'loading'"，逻辑中设为 personel.status = PersonnelStatus.LOADING —— 更语义化、易测试、易扩展。