4

I have a simple component which uses a service returning an Observable. Such Observable is used to control the creation of an html element via *ngIf.

Here the code

@Component({
  selector: 'hello',
  template: `<h1 *ngIf="stuff$ | async as obj">Hello {{obj.name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent implements AfterViewInit {
  constructor(
    private myService: MyService,
  ) {}

  stuff$;

  ngAfterViewInit() {
    this.stuff$ = this.myService.getStuff();
  }
}


@Injectable({
  providedIn: 'root'
})
export class MyService {
  getStuff() {
    const stuff = {name: 'I am an object'};
    return of(stuff).pipe(delay(100));
  }
}

As you can see, getStuff() returns and Observable with a delay and everything works as expected.

Now I remove the delay and I get the following error on the console

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: null'. Current value: 'ngIf: [object Object]'.

This is a Stackbliz that reproduces the case.

Is this inevitable? Is there a way to avoid this error? This small example replicates a real world example, where MyService queries a back end, so the delay.

This is for me relevant because I would like to be able to run tests in a synchronous way simulating the real backend and, when I try such an approach, I get the same result.

Picci
  • 16,775
  • 13
  • 70
  • 113

4 Answers4

12

The error basically says that one change triggered another change. It happens only without delay(100) because RxJS is strictly sequential and subscriptions happen synchronously. If you use delay(100) (even if you use just delay(0) it makes the emission asynchronous so it happens in another frame and is caught by another change detection cycle.

A very simple way to avoid this is just wrapping assigning to a variable with setTimeout() or with NgZone.run().

Or more "Rx way" is using subscribeOn(async) operator:

import { asyncScheduler } from 'rxjs';
import { observeOn } from 'rxjs/operators';

...

return of(stuff).pipe(
  observeOn(asyncScheduler)
);
martin
  • 93,354
  • 25
  • 191
  • 226
2

If you need to change the model synchronously in the ngAfterViewInit life cycle hook, you can trigger change detection to avoid the ExpressionChangedAfterItHasBeenCheckedError error:

constructor(private changeDetectorRef: ChangeDetectorRef) { }

ngAfterViewInit() {
  this.stuff$ = this.myService.getStuff();
  this.changeDetectorRef.detectChanges();
}

See this stackblitz for a demo.

ConnorsFan
  • 70,558
  • 13
  • 122
  • 146
0

You are assigning your observable after initializing the view. Try:

@Input() name: string;
stuff$ = this.myService.getStuff();

Or:

ngOnInit() { // or even in constructor()
    this.stuff$ = this.myService.getStuff();
}
Harun Yilmaz
  • 8,281
  • 3
  • 24
  • 35
-1

Why do you handle stuff$ as @Input when you try to get it from the myService, too? It's a kind of conflict while rendering.

Maybe ngAfterViewChecked would work better instead of ngAfterViewInit. But the solution still isn't very nice.

Gundelino85
  • 49
  • 3