Angular 8 Metronic 绑定未更新 [英] Angular 8 Metronic binding not updating

问题描述

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

我有一个带有表单的组件.我希望微调器在提交点击时出现并在 API 响应时消失.这是组件代码的一部分:

@Component({选择器:'更改密码'，templateUrl: './change-password.component.html',styleUrls: ['./change-password.component.scss'],})导出类 ChangePasswordComponent 实现 OnInit、OnDestroy {isLoading: boolean = false;...提交() {this.isLoading = true;this.utilisateurService.changePassword(changePasswordData).pipe(finalize(() => this.isLoading = false)).subscribe(() => {});}...}

...<div class="kt-login__actions"><按钮(点击)=提交()"[ngClass]="{'kt-spinner kt-spinner--right kt-spinner--md kt-spinner--light': isLoading}">提交

当我点击提交按钮时，isLoading 属性更新为 true 并出现微调器.当 finalize() 执行时，isLoading 属性更新为 false 但 Spinner 不会消失...

我不明白.

我尝试使用 NgZone 但同样的问题.

有什么想法吗?

编辑

我尝试过点击订阅.还是一样的问题.问题仅适用于渲染.如果我再次单击提交按钮，isLoading 属性为 false，正如预期的那样.但微调器仍在运行.

解决方案

可以解决这个问题，在app.component.ts文件中changeDetection配置设置为<代码>默认.

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.

解决方案

You can resolve this problem, in the app.component.ts file changeDetection configuration set to Default.

这篇关于Angular 8 Metronic 绑定未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！