Angular 8 Metronic binding not updating

问题

I started a project with Angular 8 Metronic.

I have a component with a form. I want spinner appears on submit click and disappear on API response. Here is a part of the component code :

@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>

When I click on submit button, isLoading property is updated to true and spinner appears. When finalize() executes, isLoading property is updated to false but spinner do not disappear...

I don't understand.

I tried to use NgZone but same problem.

Any idea ?

Edit

I tried with tap and subscribe. Still the same problem. Problem is only for rendering. If I click on submit button again, isLoading property is false, as expected. But spinner still running.

回答1:

If you want to do something when the observable completes then use the complete callback instead of finalize:

回答2:

Quick checklist

Are you sure finalize is running and the boolean is changing?

finalize is executed when the subscription is completed, not just emitting a value. There could be an issue with this.utilisateurService.changePassword(...) never completing the observable.
Does it work if you change finalize to tap?

tap transparently performs actions or side-effects on every emission.

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

As a last resource: Does it work if you do not use the pipe and change the boolean inside the subscription?

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

Even when I work in a project with Angular 8 Metronic, this issue would be Angular not changing the render when a prop changes, that is battle-tested.

来源：https://stackoverflow.com/questions/61655099/angular-8-metronic-binding-not-updating

标签

angular

asynchronous

binding

angular8

metronic