Angular 14表格实现点击单个员工按钮仅显示对应Spinner

问题根源是你用了一个全局的loading布尔变量，点击任意按钮都会把这个变量设为true，导致所有按钮的Spinner都触发显示。要实现仅触发点击员工对应按钮的Spinner，需要跟踪当前正在更新的员工唯一标识，而非用全局开关。

步骤1：修改TypeScript代码 #

把全局的loading变量替换为存储当前加载中员工ID的变量，在更新方法中设置/清空这个标识：

// 替换原来的loading变量，存储当前加载的员工ID，无加载时设为null
loadingPersonelId: number | null = null;

ngOnInit(): void {
  
}

updatePerspnel(personel) {
  // 设置当前加载的员工ID
  this.loadingPersonelId = personel.id;
  this.personelService.updatePersonel(personel).subscribe(response => {
    if (response === Constants.OK) {
      this.alertifyService.makeSuccess();
    } else {
      this.alertifyService.makeError();
    }
    // 请求完成后清空加载标识
    this.loadingPersonelId = null;
  }, error => {
    // 处理请求失败场景，避免Spinner一直显示
    this.alertifyService.makeError();
    this.loadingPersonelId = null;
  });
}

步骤2：修改HTML代码 #

修改Spinner的显示条件，仅当当前员工的ID与loadingPersonelId匹配时才显示：

<div class="table-responsive">
  <table class="table table-hover table-bordered" filterControl="true">
    <thead class=" text-primary">
      <th>NAME</th>
      <th>SURNAME</th>
      <th>DATE</th>
      <th></th>
    </thead>
    <tbody>
      <tr *ngFor="let personel of dataPersonel ">
        <td> <b>{{personel.name}}</b> </td>
        <td> {{personel.surname}}</td>
        <td> {{personel.date | date:'MM/dd/yyyy'}}</td>
        <td>
          <button mat-raised-button
            class="btn btn-info" (click)="updatePerspnel(personel)">
            UPDATE
            <!-- 仅匹配当前加载的员工ID时显示Spinner -->
            <mat-icon *ngIf="loadingPersonelId === personel.id">
              <mat-spinner color="primary" diameter="20"> </mat-spinner>
            </mat-icon>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

补充说明 #

• 如果你的personel对象没有id字段，可替换为其他唯一标识（如uuid、employeeCode等），只要能区分每个员工即可。
• 新增错误回调处理，避免请求失败时Spinner一直处于显示状态。

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