Angular 8 Metronic绑定不更新

Question

我用Angular 8 Metronic开始了一个项目。

我有一个带表单的组件，我想让spinner在提交点击时出现，在API响应时消失。我想让spinner在点击提交时出现，并在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>

当我点击提交按钮时。isLoading 财产更新为 true 和旋转器出现。finalize() 执行。isLoading 财产更新为 false 但旋转器并没有消失...

我不明白。

我试着用NgZone，但问题一样。

有什么办法吗？

编辑

我试过用点击和订阅。还是一样的问题。问题只出现在渲染上。如果我再点击提交按钮。isLoading 财产是 false，如期而至。但spinner仍在运行。

Answer 1

如果你想在observable完成时做一些事情，那么就使用complete回调而不是finalize。

Answer 2

快速检查表

1. 你确定吗？finalize 正在运行，并且布尔值正在改变？

   finalize 的时候执行。竣工，而不仅仅是发出一个值。可能有一个问题，那就是 this.utilisateurService.changePassword(...) 从来没有完成过可观察的。

2. 如果你改变 finalize 到 tap?

   tap 透明地对每个排放物执行动作或副作用。

      this.utilisateurService
          .changePassword(changePasswordData)
          .pipe(tap(() => this.loading = false))
          .subscribe(() => { });

3. 作为最后一个资源。如果你不使用管子，在订阅里面改变布尔值，它是否可以工作？

      this.utilisateurService
          .changePassword(changePasswordData)
          .subscribe(() => { this.loading = false; });

即使我在一个项目中使用Angular 8 Metronic工作，这个问题将是Angular在道具变化时不改变渲染，这是经过实战检验的。