Angular 8 Metroni c привязка не обновляется - PullRequest
Новая
       24

Angular 8 Metroni c привязка не обновляется

0 голосов
/ 07 мая 2020

Я начал проект с Angular 8 Metroni c.

У меня есть компонент с формой. Я хочу, чтобы счетчик появлялся при нажатии на кнопку отправки и исчезал при ответе 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, как и ожидалось. Но спиннер все еще работает.

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

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

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

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

  2. Работает ли finalize на tap?

    tap прозрачно выполняет действия или побочные эффекты для каждого излучения. 

      this.utilisateurService
          .changePassword(changePasswordData)
          .pipe(tap(() => this.loading = false))
          .subscribe(() => { });
В качестве последнего ресурса: работает ли он, если вы не используете канал и меняете логическое значение внутри подписки? 
      this.utilisateurService
          .changePassword(changePasswordData)
          .subscribe(() => { this.loading = false; });

Даже когда я работаю в проекте с Angular 8 Metroni c, эта проблема Angular не меняет рендеринг при изменении опоры, это проверено в бою.

0 голосов
/ 07 мая 2020

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

...