Привязка Angular 8 Metronic не обновляется

Я начал проект с 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, как и ожидалось. Но спиннер все еще работает.


angular angular8 asynchronous binding metronic
person Darkerone    schedule 07.05.2020    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Если вы хотите что-то сделать, когда наблюдаемый завершается, используйте полный обратный вызов вместо finalize:

person Dova    schedule 07.05.2020

arrow_upward
0
arrow_downward

Быстрый контрольный список

  1. Вы уверены, что finalize запущен, а логическое значение меняется?

    finalize выполняется, когда подписка завершена , а не просто выдача значения. Может быть проблема, если this.utilisateurService.changePassword(...) никогда не завершает наблюдаемое.

  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 не меняет рендеринг при изменении опоры, что проверено в бою.

person Ignacio Lago    schedule 07.05.2020
comment
Спасибо за ответ. Пробовал с тапом и подписаться. Все та же проблема. Проблема только в рендеринге. Если я снова нажму кнопку отправки, свойство isLoading будет ложным, как и ожидалось. - person Darkerone; 07.05.2020

arrow_upward
0
arrow_downward

Вы можете решить эту проблему, установив app.component.ts файл changeDetection configuration на Default.

person ozturkcagtay    schedule 06.02.2021