ExpressionChangedAfterItHasBeenCheckedError on dialog open with spinner.
- 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
Bewertung
Dieses Issue wurde noch nicht bewertet.