我开始了一个8度角质化的项目。
我有一个带有表单的组件。我希望旋转器出现在提交,点击和消失在API的响应。以下是组件代码的一部分:
@Component({
selector: 'change-password',
templateUrl: './change-password.component.html',
styleUrls: ['./change-password.component.scss'],
})
export class ChangePasswordComponent implements OnInit, OnDestroy {
isLoading: boolean = false;
...
submit() {
this.isLoading = true;
this.utilisateurService
.changePassword(changePasswordData).pipe(finalize(() => this.isLoading = false))
.subscribe(() => {});
}
...
}
<form class="kt-form" [formGroup]="changePasswordForm" autocomplete="off">
...
<div class="kt-login__actions">
<button (click)="submit()"
[ngClass]="{'kt-spinner kt-spinner--right kt-spinner--md kt-spinner--light': isLoading}">
Submit
</button>
</div>
</form>
当我单击submit按钮时,isLoading
属性将被更新为true
并显示为spinner。当finalize()
执行时,isLoading
属性将更新为false
,但旋转器不会消失.
我不明白。
我试着使用NgZone,但同样的问题。
知道吗?
编辑
我试过点击和订阅。还是同样的问题。问题只适用于渲染。如果我再次单击submit按钮,则isLoading
属性为false
,正如预期的那样。但旋转者仍在奔跑。
发布于 2021-02-06 13:08:12
您可以在app.component.ts
文件changeDetection configuration
设置为Default
中解决此问题。
发布于 2020-05-07 02:43:02
如果您想在可观察性完成时做一些事情,那么使用完整的回调,而不是finalize:
发布于 2020-05-07 02:45:01
快速核对表
finalize
正在运行,而布尔值正在改变吗?finalize
是在订阅为完成时执行的,而不仅仅是发出值。如果您将observable.
tap
tap
,则可能会出现一个问题,即this.utilisateurService.changePassword(...)
永远不会完成该任务,它会透明地对每个排放执行操作或副作用。 this.utilisateurService
.changePassword(changePasswordData)
.pipe(tap(() => this.loading = false))
.subscribe(() => { });
作为最后一个资源的
this.utilisateurService
.changePassword(changePasswordData)
.subscribe(() => { this.loading = false; });
即使当我在一个项目的角度8 Metronic,这个问题将是角不改变渲染时,一个道具改变,这是战斗测试。
https://stackoverflow.com/questions/61655099
复制相似问题