如果 API 调用失败，如何将切换状态更改为原始状态答案

【问题标题】：How to change toggle state to original state if API call fails如果 API 调用失败，如何将切换状态更改为原始状态
【发布时间】：2021-02-23 04:19:24
【问题描述】：

我正在构建一个应用程序，管理员可以在其中停用/激活任何员工。基本上，当我的页面加载每个员工的活动状态时，都会绑定到从 API 响应中获取的mat-table。如果管理员通过另一个 API 调用停用/激活任何员工并且由于某种原因调用错误，我希望切换到之前的状态。

示例：我使用以下字段从mat-table 中的emp1 数据库中获取员工数据： id、fname、mname、lname、role、activestate（真/假）。现在，如果我将activestate 从 true 切换为 false 或反之亦然，我将分别对 API 进行 HTTP 调用。如果该 API 调用因任何原因失败，用户应该会看到 activestate 变量的原始状态。

这是我在用户更改切换状态时调用的函数。

      /** Update employee is activated state*/
  updateEmployeeActiveState(e: any, empoyee: Employee, row) {
    console.log(row);
    var user = JSON.parse(localStorage.getItem('currentUser'));
    if (e.checked) {
      this.backendService.putEmployeeState(user.clientId, empoyee.employeeId, 1).subscribe(response => {

        this._snackBar.open(response.toString(), '', {
          duration: 3000,
          verticalPosition: 'bottom'
        });
      }, (error) => {

        this._snackBar.open("error -->"+error, '', {
          duration: 3000
        });
       this.dataSource.data[row].user.activeState = 0;
        
        
      });
    } else {
      this.backendService.putEmployeeState(user.clientId, empoyee.employeeId, 0).subscribe(response => {

        this._snackBar.open(response.toString(), '', {
          duration: 3000,
          verticalPosition: 'bottom'
        });
      }, (error)=> {

        this._snackBar.open("error -->"+error, '', {
          duration: 3000
        });
        this.dataSource.data[row].user.activeState = 1;
      });
    }
  }

模板代码：

<!-- Is Activated Column -->
<ng-container matColumnDef="activeState">
    <th mat-header-cell *matHeaderCellDef> Is Activated </th>
    <td mat-cell *matCellDef="let element; let rowNo = index;" data-title="User Name:"><mat-slide-toggle *ngIf="element.user?.userName" [checked]="element.user.activeState == 1" (change)="updateEmployeeActiveState($event, element, rowNo)" [(ngModel)]="element.user.activeState"></mat-slide-toggle></td>
  </ng-container>

请忽略 row.user.activeState，因为我试图重新分配员工状态，但它不起作用。

【问题讨论】：

请同时附上这个sn-p相关的模板代码。
我写了一些新代码，如果出现错误，我会更改用户活动状态，但现在我面临一个新问题，即如果我关闭服务器并切换，我会收到错误提示 Typescripy:activestate= null 无法访问

标签： angular typescript angular-material

【解决方案1】：

问题

您的代码完全只处理一个问题

考虑下面两行

this.dataSource.data[row].user.activeState = 0;
...
this.dataSource.data[row].user.activeState = 1;

这些行不会触发更改检测。考虑添加一种触发更改检测的方法，例如使用扩展运算符 (...)

  // Update employee is activated state
  updateEmployeeActiveState(e: any, empoyee: Employee, row) {
     const user = JSON.parse(localStorage.getItem('currentUser'));
     const activeState = e.checked ? 0 : 1
     this.backendService
       .putEmployeeState(user.clientId, empoyee.employeeId, activeState)
       .subscribe({
          next:() => {
             this._snackBar.open(response.toString(), '', {
               duration: 3000,
               verticalPosition: 'bottom'
              });
          },
          error: () => {
            this._snackBar.open("error -->"+error, '', {
              duration: 3000
           });
            // Change Back to initial state
            this.dataSource.data[row].user.activeState = !activeState;
            
            // Trigger change detection
            this.dataSource = [...this.dataSource]
          }
       })
  }

【讨论】：