1

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

4

3 回答 3

0

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

于 2021-02-06T21:08:12.767 回答
0

快速清单

  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 在道具更改时不会更改渲染，这是经过实战考验的。

于 2020-05-07T10:45:01.380 回答
0

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

于 2020-05-07T10:43:02.840 回答