时间戳

首页 > 解决方案 > 如何重置从 Angular 中的 API 调用获取初始值的垫滑动切换？

javascript - 如何重置从 Angular 中的 API 调用获取初始值的垫滑动切换？

问题描述

我有以下 mat-slide-toggle，item来自 API 调用。

<mat-slide-toggle [checked]="item.status" [disabled]="clicked" (change)="onItemChange(item); clicked = true"></mat-slide-toggle>

当用户切换此开关时，会发送一个 POST 调用来更改项目的状态。但是，如果调用失败，我需要将此切换重置为其原始位置，以便 UI 与状态的真实值保持同步。我尝试了以下方法来做到这一点。

onItemChange(item: MyItem) {
  this.myService.changeItemStatus(this.accountId, item.id).pipe(
      catchError((e) => {
        item.status = !item.status;
        return e;
      }),
      finalize(() => {
        this.clicked = false;
      })
    )
    .subscribe(data => {
    });
  }
}

但是，即使catchError块确实正在执行，切换也不会重置，这似乎也阻止了finalize块中的代码运行，这应该在调用完成后重新启用切换。

标签： javascriptangularangular-material

解决方案

我能够弄清楚这一点。我还传递$event给了我的onItemChange()函数，并且能够checked直接在 TS 代码中访问该属性。

HTML

<mat-slide-toggle [(checked)]="item.status" [disabled]="clicked" (change)="onItemChange(item, $event); clicked = true"></mat-slide-toggle>

TS

onItemChange(item: MyItem, event) {
    this.myService.changeItemStatus(this.accountId, item.id).pipe(
      catchError(() => {
        event.source.checked = !event.source.checked;
        return of();
      }),
      finalize(() => {
        this.clicked = false;
      })
    )
    .subscribe(data => {
    });
  }
}

推荐阅读