Angular 8 Metronic 绑定未更新

Posted 2023-02-19

【中文标题】Angular 8 Metronic 绑定未更新

【英文标题】：Angular 8 Metronic binding not updating

【发布时间】：2020-08-22 14:10:13

【问题描述】：

我使用 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，正如预期的那样。但微调器仍在运行。

【参考方案1】：

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

【参考方案2】：

快速清单

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

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

把finalize改成tap能用吗？

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

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

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

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

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

【讨论】：

感谢您的回答。我尝试点击并订阅。还是同样的问题。问题仅用于渲染。如果我再次单击提交按钮，isLoading 属性为 false，正如预期的那样。

【参考方案3】：

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