javascript - ng如果不更新DOM

我的函数中的ts文件中有一个变量isLTEavailable。调用该函数时，根据条件，isLTEavailable的值会更改并正确记录，但是由于某些原因，它不会在DOM中进行更新。

这是我的ngif条件：

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

这是我的ts函数：

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)
}

我也使用字符串插值打印了该变量，即使控制台正确更新，它也始终显示true作为其值。

附言isLTEavailable初始化为true。

最佳答案

利用Angular的可观察性

在您的TS文件中：

宣布 ：

  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));
  }

然后在HTML中使用ASYNC管道：

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

这是我整理的工作示例，供您查看：

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