Expressionchangedafterithasbeencheckederror - Ngxspinnerservice Error

Asked

Viewed 85 times

0

The error happens only when I try to open a dialog, where inside, requests happen inside onInit, when starting the application error does not appear.

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.. Find more at https://angular.io/errors/NG0100
    Angular 4
    NgxSpinnerComponent_Template ngx-spinner.js:316
    Angular 25
    RxJS 5
    Angular 27
    CaixasLancamentosListaComponent_div_7_Template template.html:97
    Angular 9
    CaixasLancamentosListaComponent_Template template.html:90
    Angular 23
    RxJS 5
    Angular 28

spinner Component

import { Component } from '@angular/core';
import { SpinnerService } from './services/spinner.service';
import { NgxSpinnerService } from 'ngx-spinner';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent{

constructor(
  private spinnerService: SpinnerService,
  private spinner: NgxSpinnerService) {
    this.spinnerService.spinnerStatus.subscribe((status: boolean) => {
      if (status === true) {
        this.spinner.show();
      } else {
        this.spinner.hide();
      }
    });
  }

}

service

import { Injectable, EventEmitter } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SpinnerService {

  spinnerStatus = new EventEmitter<boolean>();
  contagemCarregamentos = 0;
  constructor() { }

  alterarSpinnerStatus(valor: boolean) {
    if (valor === false && this.contagemCarregamentos === 0) {
      this.spinnerStatus.emit(valor);
    } else if (valor === true) {
      this.contagemCarregamentos = this.contagemCarregamentos + 1;
      this.spinnerStatus.emit(valor);
    } else {
      this.contagemCarregamentos = this.contagemCarregamentos - 1;
      if (this.contagemCarregamentos === 0) {
        this.spinnerStatus.emit(valor);
      }
    }
  }

}

html

<ngx-spinner bdOpacity="0.9" bdColor="rgba(97,96,96,0.76)" size="medium" color="#fff" type="ball-clip-rotate-multiple"
  [fullScreen]="true">
  <p style="color: white">Carregando Informações...</p>
</ngx-spinner>

I’ve tried using Viewafeterinit, Viewcontent, Afterviewchecked, Changedetectorref inside them, and I’m sure the problem is in the spinner, because if I remove, the modal opens without any problem, the issue is that to improve the user experience, I can not leave without spinner.

  • 1

    This is not really an error, it is usually shown in the console when it opens some component (modal for example), which has some service in it. For some reason Angular checks the component and recognizes that it has changed the state of some property in the component, so when the spinner removes the 'error' it disappears. I’ve noticed this behavior in Angular for a long time. But, you can rest assured that this is just a small problem in the Angular Runtime. I say this from experience, when I build the project and run on a server this 'error' does not appear.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.