akveo / akveo/nebular

ExpressionChangedAfterItHasBeenCheckedError on dialog open with spinner.

Offen
#2,284 1 Kommentar 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
8.1k
Forks
1.5k
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### Issue type

**I'm submitting a ...** (check one with "x")

* [x] bug report
* [ ] feature request

### Issue description

**Current behavior:**

I'm trying to open a dialog that contains custom component with OnInit method that call HTTP request for getting data.
I have an HTTP intereptor that start and stop a spinner that is visible in main container. When I open dialog, onInit method call HTTP request, interceptor set spinner ON but in console I have an error:
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'nbSpinner: false'. Current value: 'nbSpinner: true'.
To solve this issue I try to set boolean that shown spinner (true or false) in different way (on component, calling service and last with Observable) but nothing seems to work.

**Expected behavior:**

NO ExpressionChangedAfterItHasBeenCheckedError error must be appears.

**Steps to reproduce:**

I made a[ stackblitz example](https://stackblitz.com/edit/nebular-spinner-error) to test this issue.
Start application, click on dialog button in the first page , dialog will be open and ExpressionChangedAfterItHasBeenCheckedError error will be appear on console.

**Related code:**
Spinner will be visualized here:

```


```
**DialogbodyComponent** is the body of dialog that call http request
```

@Component({
selector: 'app-dialogbody',
templateUrl: './dialogbody.component.html',
styleUrls: ['./dialogbody.component.scss']
})
export class DialogbodyComponent implements OnInit {

isSpLoading = false;

constructor(private http: HttpClient, private spinnerSrv: SpinnerService, private serviceInvoker: ServiceInvokerService) { }
url = ' https://demo1257086.mockable.io/testdialog';
ngOnInit() {
//this.spinnerSrv.setSpinnerState(false);
console.error('DialogbodyComponent --> ngOninit START ' + this.isSpLoading );
this.serviceInvoker.callBe();
//this.http.get(this.url);
/*.subscribe((response) => this.spinnerSrv.setSpinnerState(true));
console.error('DialogbodyComponent --> ngOninit AFTER BE CALL ' + this.isSpLoading );
this.spinnerSrv.setSpinnerState(false);*/
}

callBe() {
// this.spinnerSrv.setSpinnerState(false);
console.error('DialogbodyComponent --> ngOninit START ' + this.isSpLoading );
this.serviceInvoker.callBe();
/*subscribe((response) => this.spinnerSrv.setSpinnerState(true));
console.error('DialogbodyComponent --> ngOninit AFTER BE CALL ' + this.isSpLoading );
this.spinnerSrv.setSpinnerState(false);*/
}
}

```

StackBlitz [StackBlitz Seed Project](https://stackblitz.com/edit/nebular-spinner-error)

### Other information:

**npm, node, OS, Browser**
```

Node: v10.13.0
npm: 6.4.1

OS: Windows (7/8/10).
Browser: Chrome?

```

**Angular, Nebular**
```
{
"name": "nebular-demo",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "^0.801.0",
"@angular/animations": "~8.1.0",
"@angular/cdk": "~8.0.2",
"@angular/common": "~8.1.0",
"@angular/compiler": "~8.1.0",
"@angular/core": "~8.1.0",
"@angular/forms": "~8.1.0",
"@angular/platform-browser": "~8.1.0",
"@angular/platform-browser-dynamic": "~8.1.0",
"@angular/router": "~8.1.0",
"@nebular/theme": "^4.1.1",
"core-js": "^2.5.4",
"nebular-icons": "^1.1.0",
"rxjs": "~6.5.2",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular/cli": "~8.1.0",
"@angular/compiler-cli": "~8.1.0",
"@angular/language-service": "~8.1.0",
"@schematics/angular": "~7.1.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.4.5"
}
}

```

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.