ngIf - Expression has changed after it was checked

后端 未结 6 1501
误落风尘
误落风尘 2021-02-01 12:37

I have a simple scenario, but just can\'t get it working!

In my view I display some text in a box with limited height.

The text is being fetched from the server,

相关标签:
6条回答
  • 2021-02-01 13:01

    Causing change detector to run after ngAfterContentChecked solved the problem for me

    example as below:

    import { ChangeDetectorRef,AfterContentChecked} from '@angular/core'
    export class example implements OnInit, AfterContentChecked {
        ngAfterContentChecked() : void {
            this.changeDetector.detectChanges();
        }
    }
    

    Although, as I read some of the articles, this issue gets solved in production mode without any required fix.

    Below is the possible reason for such issue:

    It enforces a uni-directional data flow: when the data on our controller classes gets updated, change detection runs and updates the view.

    But that updating of the view does not itself trigger further changes which on their turn trigger further updates to the view

    https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

    0 讨论(0)
  • 2021-02-01 13:04

    if you are using BehaviorSubject for sharing the value between components:

    component.ts:

    import { Observable } from 'rxjs/Observable';
    import {tap, map, delay} from 'rxjs/operators';
    
    private _user = new BehaviorSubject<any>(null);
    user$ = this._user.asObservable();
    
    Observable.of('response').pipe(
                tap(() =>this._user.next('yourValue'),
                delay(0),
                map(() => 'result')
              );
    
    

    component.html:

    <login *ngIf="!(dataService.user$ | async); else mainComponent"></login>
    
    0 讨论(0)
  • 2021-02-01 13:09

    For anyone struggling with something similar, basically you are trying to update the dom in a place where you shouldn't, in this link https://blog.angular-university.io/angular-debugging/ you can find details on how to debug, find the exact piece of code that is generating the issue, and some ideas on how to fix it

    0 讨论(0)
  • 2021-02-01 13:13

    this error occur because you in dev mode:

    In dev mode change detection adds an additional turn after every regular change detection run to check if the model has changed.

    so, to force change detection run the next tick, we could do something like this:

    export class App implements AfterViewChecked {
    
      show = false; // add one more property
    
      constructor(private cdRef : ChangeDetectorRef) { // add ChangeDetectorRef
        //...
      }
      //...
      ngAfterViewChecked() {
        let show = this.isShowExpand();
        if (show != this.show) { // check if it change, tell CD update view
          this.show = show;
          this.cdRef.detectChanges();
        }
      }
    
      isShowExpand()
      {
        //...
      }
    }
    

    Live Demo: https://plnkr.co/edit/UDMNhnGt3Slg8g5yeSNO?p=preview

    0 讨论(0)
  • 2021-02-01 13:14

    For some reason, @Tiep Phan's answer didn't work for me to force change detection, but using setTimeout (which also forces change detection) did.

    I also only had to add it to the offending line, and it worked fine with the code I already had in ngOnInit instead of having to add ngAfterViewInit.

    Example:

    ngOnInit() {
        setTimeout(() => this.loadingService.loading = true);
        asyncFunctionCall().then(res => {
            this.loadingService.loading = false;
        })
    }
    

    More details here: https://github.com/angular/angular/issues/6005

    0 讨论(0)
  • 2021-02-01 13:24

    To overcome this issue you can move the variable that changes *ngIf state, from ngAfterViewInit to ngOnInit or constructor.

    As @tiep-phan told, another way is that pass ChangeDetectorRef to constructor and call detectChanges() whenever you change the state of *ngIf.

    0 讨论(0)
提交回复
热议问题