Angular：使用 setInterval 时 ngIf 与 Img 元素的行为

Question

我有这个图片元素

<img *ngIf="indicator" src="assets/on.gif" width="20px" height="20px">

现在，在声明的同时

indicator:boolean = false;

所以默认情况下我没有图像

现在我有一个按钮，如果点击它，它会调用一个setInterval方法

setInterval(this.setIndicator, 2000);

 setIndicator() {
    this.indicator = true;
    console.log(this.indicator);
  }

在控制台中，我可以看到这个元素的值为 true，但它没有显示 img

如果我手动将其设置为 true，它会反映该 img。即

<img *ngIf="true" src="assets/on.gif" width="20px" height="20px">

Answer 1

你可以尝试使用

setInterval(()=>this.setIndicator(), 2000);

使用箭头函数 (()=>)，您将 this 的范围绑定到组件，而不是 setInterval 内的范围。

setInterval 中的

this.indicator 与组件的 indicator 不同。使用箭头函数可以解决这个问题。

This article 可以提供更多详细信息

Answer 2

我在html中定义的代码如下

 <img *ngIf="indicator" src="assests/image.jpg" width="100vw" height="100vh">
 <button class="btn btn-primary" (click)="setIndicator()">Click</button>

然后在 component.ts 中，我创建指标属性

indicator:boolean = false

并创建 setIndicator() 方法

setIndicator(){
  setTimeout(() =>{
     this.indicator=true;
  },2000);

代码是这样工作的

Angular：使用 setInterval 时 ngIf 与 Img 元素的行为

Angular: ngIf behaviour with Img element while using setInterval

angular

angular8

angular-ng-if