变量更改检测似乎不适用于 ngIf答案

【问题标题】：Variable change detection does not seem to be working with ngIf变量更改检测似乎不适用于 ngIf
【发布时间】：2019-11-22 09:47:05
【问题描述】：

我已经在与我的帖子类似的帖子中尝试过，但似乎仍然无法正常工作。我想在大约 15 秒后在我的网页上显示一些内容。我使用setTimout，然后使用if 语句来检查某事是否正确，然后相应地更改布尔变量。

我有一个组件有一个变量timer，我最初将它设置为false。然后我在一个函数中运行setTimeout。 15 秒后，我进行检查。然后，如果需要，我会更改 timer 变量。这没有用。所以我还在我的页面上添加了一个router.navigate，认为它会重新评估timer 变量，但这也不起作用。

这是我的html

<br> <br>
<div *ngIf="timer == false">
  <p>Results are loading. Please wait.</p>
  <div>
  <div *ngIf="timer == true">
    <p>Sorry, but this seems to be taking longer than usual. Please wait while we continue to check.</p>
    </div>
 <br>
 <div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>

</div>

然后在我的component里面

constructor(private _apiService: ApiService, private router: Router, private _dataService: DataService)
    {}
    public timer: boolean = false;

checkDuplicates(someArray){
        var count = 0;
        var i = 0;
        var length = this.userResults.length;

        setTimeout(() => {
                    if(length != someArray.length){
                        this.timer = true;
                        this.router.navigate(['/processing'])
                        console.log('turn on new processing notification')
                    }

                }, 15000)

到目前为止，我收到“正在加载结果。请稍候。”，但即使将计时器变量切换到 true 也没有变化。我在有无router.navigate的情况下都试过了。我已经尝试了下面列出的所有事情，现在很幸运。我还尝试通过其他帖子中提到的 ChangeDetectionRef 和 NgZone 和 ApplicationRef 方法进行手动更新。我能否请您了解一下。

【问题讨论】：

尝试用!timer替换timer == false和用timer替换timer == true
这仍然不起作用。 @PrerakSola
不确定这是否是问题所在，但您上面的 HTML 不正确。你没有正确关闭你的第一个 ngIf，你有
而不是
感谢您的关注。很惊讶我在尝试编译时没有收到错误。但它并没有解决我的问题
你导入了CommonModule 吗？

标签： javascript html angular angular6 angular-ng-if

【解决方案1】：

我无法使用 ngIf 来完成这项工作。相反，我将 html 格式化为具有id 选项卡，然后我使用document.getElementById 并在setTimeout 函数中对其进行了更改。

【讨论】：

【解决方案2】：

使用setInterval 和clearInterval 而不是setTimeout

【讨论】：

这也不起作用。我在控制台中打印了消息，但 html 没有变化

【解决方案3】：

    <br> <br>
    <div *ngIf="!timer">
      <p>Results are loading. Please wait.</p>
      <div>
      <div *ngIf="timer">
        <p>Sorry, but this seems to be taking longer than usual. Please wait while we continue to check.</p>
        </div>
     <br>
     <div class="spinner">
      <div class="bounce1"></div>

  <div class="bounce2"></div>
  <div class="bounce3"></div>

</div>

constructor(private _apiService: ApiService, private router: Router, private _dataService: DataService)
    {}
    timer=false;

checkDuplicates(someArray){
let _self= this;
        var count = 0;
        var i = 0;
        var length = this.userResults.length;

        setTimeout(() => {
                    if(length != someArray.length){
                        _self.timer = true;
                        this.router.navigate(['/processing'])
                        console.log('turn on new processing notification')
                    }
                    else{
                        _self.timer = false;
                    }
                }, 15000)

【讨论】：