Блог

component.html

     <button mat-raised-button color="primary" type="submit">
        <mat-icon>account_box</mat-icon>
        <span *ngIf="!loading">amp;nbsp;amp;nbsp;amp;nbsp;Register</span>
        <span *ngIf="loading">amp;nbsp;amp;nbsp;amp;nbsp;Processing Request</span>
    </button>
 

component.ts

 this.auth.register(this.registerUser).subscribe(
    (success) => {
      this.loading = true;
    },
    (err) => {
      this.success = false;
      this.warning = err.error.message;
      this.loading = false;
    },
    () => {
      this.success = true;
      this.warning = null;
      this.loading = false;          
    }
  );
 

Я хочу изменить кнопку регистрации на запрос обработки и отключить ее, пока наблюдаемый не завершит трансляцию.

В настоящее время ничего не меняется, даже если загрузка имеет значение false.

Попробуйте:

     <button [disabled]="loading" mat-raised-button color="primary" type="submit">
        <mat-icon>account_box</mat-icon>
        <span *ngIf="!loading">amp;nbsp;amp;nbsp;amp;nbsp;Register</span>
        <span *ngIf="loading">amp;nbsp;amp;nbsp;amp;nbsp;</span>
    </button>
 

и в коде:

 this.loading = true
this.auth.register(this.registerUser)
  .pipe(finalize(() => this.loading = false)
  .subscribe(
    (success) => {
      // ....
    }
  );