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

代码以这种方式工作

角度：使用setInterval时，ngIf与Img元素的行为

2 个答案: