Angular 8 Metronic 绑定未更新

Question

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

我有一个带有表单的组件。我希望微调器出现在提交点击并在 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，正如预期的那样。但微调器仍在运行。

Answer 1

如果你想在 observable 完成时做某事，那么使用 complete 回调而不是 finalize：

Answer 2

快速清单

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

   finalize 在订阅完成时执行，而不仅仅是发出一个值。 this.utilisateurService.changePassword(...) 永远不会完成 observable 可能存在问题。

2. 把finalize改成tap能用吗？

   tap 透明地对每个发射执行操作或副作用。

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

1. 作为最后一个资源：如果您不使用管道并更改订阅内的布尔值，它是否有效？

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

即使我在使用 Angular 8 Metronic 的项目中工作时，这个问题也可能是 Angular 在道具更改时不会更改渲染，这是经过实战考验的。

Answer 3

您可以解决此问题，将app.component.ts 文件中的changeDetection configuration 设置为Default。