Блог

Я создаю приложение, в котором администраторы могут деактивировать / активировать любого сотрудника. В основном, когда моя страница загружается, активное состояние каждого сотрудника привязывается к mat-table извлеченному из ответа API. Если администратор деактивирует / активирует любого сотрудника с помощью другого вызова API и по какой-то причине вызывает ошибки, я хочу, чтобы переключатель был переключен в предыдущее состояние.

Пример: Я извлекаю данные сотрудника из базы данных для emp1 in mat-table со следующими полями: id , fname , mname , lname , role , activestate (true / false). Теперь, если я переключаюсь activestate с true на false или наоборот, я делаю HTTP-вызов API соответственно. Если этот вызов 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 , поскольку я пытался переназначить состояние сотрудника, но это не сработало.

Проблема

Ваш код полностью работает только с одной проблемой

Рассмотрим следующие две строки

 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]
          }
       })
  }