javascript - ngIf not updating DOM - Stack Overflow

admin管理员组

文章数量:1277393

I have a variable isLTEavailable in my ts file inside a function. When the function is called, based on the a condition, isLTEavailable's value changes and is logged correctly, but for some reason, it is not being updated in the DOM.

Here's my ngif condition:

<li class="nav-item dropdown" *ngIf="isLTEavailable">

Here's my ts function:

console.log("Lte --", lte_id)

if (lte_id != undefined) {
    sessionStorage.setItem("lte_customer_id", lte_id.toString())
    this.isLTEavailable = true;
    console.log("isLTEavailable -----> ", this.isLTEavailable)
} else {
    sessionStorage.setItem("lte_customer_id", 'n/a')
    this.isLTEavailable = false;
    console.log("isLTEavailable -----> ", this.isLTEavailable)    
}

I printed the variable using string interpolation as well and it always shows true as its value even though console updates correctly.

P.S. isLTEavailable is initialized as true.

I have a variable isLTEavailable in my ts file inside a function. When the function is called, based on the a condition, isLTEavailable's value changes and is logged correctly, but for some reason, it is not being updated in the DOM.

Here's my ngif condition:

<li class="nav-item dropdown" *ngIf="isLTEavailable">

Here's my ts function:

console.log("Lte --", lte_id)

if (lte_id != undefined) {
    sessionStorage.setItem("lte_customer_id", lte_id.toString())
    this.isLTEavailable = true;
    console.log("isLTEavailable -----> ", this.isLTEavailable)
} else {
    sessionStorage.setItem("lte_customer_id", 'n/a')
    this.isLTEavailable = false;
    console.log("isLTEavailable -----> ", this.isLTEavailable)    
}

I printed the variable using string interpolation as well and it always shows true as its value even though console updates correctly.

P.S. isLTEavailable is initialized as true.

• javascript
• angular
• angular-ng-if

Share Improve this question Follow edited Dec 19, 2019 at 7:17 uminder 26.2k66 gold badges4343 silver badges8989 bronze badges asked Dec 19, 2019 at 7:13 Ujjwal SharmaUjjwal Sharma 12611 gold badge22 silver badges1212 bronze badges 13

• have you tried with isLTEavailable == true ?? – Mukundhan Commented Dec 19, 2019 at 7:18
• yes i did. Still the same issue – Ujjwal Sharma Commented Dec 19, 2019 at 7:23
• can you provide working demo, i need to see your condition and where are you calling the function – varundhariyal Commented Dec 19, 2019 at 7:24
• Where are you running this function? – manneJan89 Commented Dec 19, 2019 at 7:29
• Just display the value using interpolation i.e. {{isLTEavailable}} above the list item and make sure the value is getting changed. – MonkeyScript Commented Dec 19, 2019 at 7:29

 |  Show 8 more ments

4 Answers 4

Sorted by: Reset to default 5

According to this

Change detection fails on change in a variable inside a callback or subscribe method. One could use

 ngZone.run(() => { this.isLTEavailable = false }) 

to update the value. (or) trigger the change detection manually by following

import {ChangeDetectorRef} from '@angular/core'
constructor(private ref: ChangeDetectorRef){}


//after variable update
this.ref.detectChanges();

Let me know if this works. Thanks

Make Use of Angular's Observable

In your TS file :

Declare :

  import { Observable } from 'rxjs';
  isLTEavailable : Observable<boolean> ; 

  //and in your function
  console.log("Lte --", lte_id)

  if (lte_id != undefined) {
    sessionStorage.setItem("lte_customer_id", lte_id.toString())
    this.isLTEavailable = new Observable(observer=>observer.next(true));
  } else {
    sessionStorage.setItem("lte_customer_id", 'n/a')
    this.isLTEavailable = new Observable(observer=>observer.next(false));
  }

Then in your HTML Use the ASYNC pipe :

 <li class="nav-item dropdown" *ngIf="isLTEavailable | async">

Here is the working example i have put together for you to look at :

https://stackblitz./edit/angular-v4dvx6

Thanks all for having a healthy discussion here. I found the issue with my code and fixed it and now the interpolation works as expected. The issue was the initialisation of isLTEavailable variable inside the ngOnInit which resulted it in being updated back to the original state whenever the function was called. Again, thanks for helping me out. I got to learn about the changeDetection function and learned about using Observables as an alternative from your answers. Thank you. Really appreciate it.

Maybe you can use ChangeDetectorRef https://angular.io/api/core/ChangeDetectorRef like this this._changeDetectorRef.detectChanges(),

constructor(private _changeDetectorRef: ChangeDetectorRef) {

}

//IN YOUR FUNCTION
if (lte_id != undefined) {
    sessionStorage.setItem("lte_customer_id", lte_id.toString())
    this.isLTEavailable = true;
    console.log("isLTEavailable -----> ", this.isLTEavailable)
    this._changeDetectorRef.detectChanges()

} else {
    sessionStorage.setItem("lte_customer_id", 'n/a')
    this.isLTEavailable = false;
    console.log("isLTEavailable -----> ", this.isLTEavailable)
    this._changeDetectorRef.detectChanges()   
}

本文标签： javascriptngIf not updating DOMStack Overflow