变量变化检测似乎不适用于 ngIf

Question

我已经在类似于我的帖子中尝试过一些东西，但似乎仍然无法正常工作。我想在大约 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)

截至目前，我得到 "Results are loading. Please wait."，但即使将计时器变量切换为 true 也没有变化。我在使用 router.navigate 和不使用 router.navigate 的情况下都进行了尝试。我已经尝试了下面列出的所有事情，现在很幸运。我还尝试通过其他帖子中提到的 ChangeDetectionRef 和 NgZone 以及 ApplicationRef 方法进行手动更新。我可以请一些见识。

Answer 1

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

Answer 2

使用 setInterval 和 clearInterval 而不是 setTimeout

Answer 3

我无法使用 ngIf 使它正常工作。相反，我将 html 格式化为具有 id 选项卡，然后我使用 document.getElementById 并在 setTimeout 函数中更改它。

变量变化检测似乎不适用于 ngIf

Variable change detection does not seem to be working with ngIf

html

javascript

angular-ng-if

angular

angular6