Question

我的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作为其值。

P.S。 isLTEavailable初始化为true。

Answer 1

利用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

Answer 2

也许您可以像这样this._changeDetectorRef.detectChanges()使用ChangeDetectorRef https://angular.io/api/core/ChangeDetectorRef，

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

Answer 3

根据this

更改检测在回调或 subscribe 方法内的变量更改时失败。一个可以使用

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

以更新值。 （或） 遵循以下步骤手动触发更改检测

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


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

让我知道是否可行。谢谢

Answer 4

感谢大家在这里进行健康的讨论。我发现了我的代码存在的问题并进行了修复，现在插值按预期工作了。问题是ngOnInit内部的isLTEavailable变量的初始化，这导致它在每次调用函数时都被更新回原始状态。再次感谢您的帮助。我学习了changeDetection函数，并学习了将Observables用作答案的替代方法。谢谢。真的很感激。

ng如果不更新DOM

4 个答案: