ngIf 不更新 DOM答案

【问题标题】：ngIf not updating DOMngIf 不更新 DOM
【发布时间】：2019-12-19 07:13:48
【问题描述】：

我在函数内的 ts 文件中有一个变量 isLTEavailable。调用函数时，根据 a 条件，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 被初始化为真。

【问题讨论】：

你试过 isLTEavailable == true 吗？？
是的，我做到了。还是一样的问题
你能提供工作演示吗，我需要看看你的情况以及你在哪里调用函数
你在哪里运行这个函数？
只需使用插值显示值，即列表项上方的{{isLTEavailable}}，并确保值正在更改。

标签： javascript angular angular-ng-if

【解决方案1】：

根据this

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

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

更新值。 （或） 通过以下手动触发更改检测

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


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

让我知道这是否有效。谢谢

【讨论】：

没有变化。 detectChanges() 返回未定义
您是否尝试在调用 detectChanges() 后将其注销？
是的，我做到了。函数返回 undefined 并且变量的值正确改变
你能用骨架创建一个 stackBlitz stackblitz.com 吗？？

【解决方案2】：

利用 Angular 的 Observable

在您的 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

【讨论】：

即使进入 if 条件而不是 else，由于某种原因，它总是设置为 false
我发布的答案是一个工作示例。我发布了同样的 stackblitz
不是我@Wisely。我的声望太低，我的投票无法解释改变。
好的，我会尝试为您提供一个工作示例，确保您的代码组合正确。
你能看看我贴的例子吗？

【解决方案3】：

也许你可以像这样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()   
}

【讨论】：

无变化。 detectChanges() 返回未定义
你能举一个stackblitz问题的例子吗？ @UjjwalSharma

【解决方案4】：

感谢大家在这里进行健康的讨论。我发现我的代码存在问题并修复了它，现在插值按预期工作。问题是 ngOnInit 中 isLTEavailable 变量的初始化，导致每当调用函数时它都会更新回原始状态。再次感谢您帮助我。我必须了解 changeDetection 功能，并从您的答案中了解了使用 Observables 作为替代方案。谢谢你。真的很感激。

【讨论】：