Angular interpolation doesn't work in a simple template-CodePudding

I have the error declared in the component:

error = "xyz";

then I have a call to authentication service:

this.authenticationService
            .login(this.f["username"].value, this.f["password"].value)
            .pipe(take(10))
            .subscribe(data => {
                if (data.authenticated) {
                    this.router.navigate([this.returnUrl]);
                } else {
                    console.log("just before Wrong cred entered");
                    this.error = "Wrong credentials entered.";
                    console.log("error is:", this.error);
                }
                this.loading = false;
                return;
            });

and I can see the console output:

console.log("just before Wrong cred entered");                          
console.log("error is:", this.error);

fine, but in the template:

<div *ngIf="error" >{{ error }}</div>

I still see the original value ('xyz'). What is wrong with this code, I tried some things, but I really don't understand?

CodePudding user response：

If you are using .onPush as a change detection mechanism to improve performance, you may need to re-trigger the change detector manually using ChangeDetectorRef to mark component for check and force re-rendering.