user3506588 user3506588 - 2 months ago 7
TypeScript Question

Expression has changed after it was checked Loading componennt

I have fond similar questions asked, but could not solve my issue.

@Component({
selector: 'waiting',
template: `
<div class="waiting">
<div *ngIf="isLoading" class="loader2"></div>
<div>`
})

export class WaitingComponent {
public isLoading: boolean;

public constructor(private _authHttp: HttpService) {
this._authHttp.request.subscribe((action: HttpAction) => {
this.isLoading = action === HttpAction.Requested;//HttpAction.Requested returns 0 or 1
});
}
}


I have seen suggestions that value isLoading has to be changed in AfterViewInit. I can't figure out how to make it work. Thanks in advance.

Answer

To work around you can use ChangeDetectorRef.detectChanges() or zone.run(...)

export class WaitingComponent {
  public isLoading: boolean;

  public constructor(private _authHttp: HttpService, cdRef:ChangeDetectorRef) {
    this._authHttp.request.subscribe((action: HttpAction) => {
      this.isLoading = action === HttpAction.Requested;//HttpAction.Requested returns 0 or 1
      cdRef.detectChanges();
    });
  }
}

but I think the real issue is somewhere in _authHttp.