Question

在代码中，我试图显示在DOM中生成随机代码的剩余时间。

   var count = setInterval(function () {
                    var date = new Date();
                    var currentSecond = date.getSeconds();
                    this.remaining = 60 - currentSecond;
                    document.getElementById("timer").innerHTML = this.remaining;
                    // alert('Time is running out ' + (i++));
                    temp.data.loadAll().then(result => {
                        temp.accounts = result;
                    });
                }, 1000);

我收到了以下错误

错误类型错误：无法将属性innerHTML设置为null

Answer 1

无需将setInterval分配给任何变量，只需将其调用constructor或ngOnInit生命周期挂钩

constructor() {
    setInterval(() => {
      var date = new Date();
      var currentSecond = date.getSeconds();
      this.remaining = 60 - currentSecond;
      document.getElementById("timer").innerHTML = this.remaining;
      // alert('Time is running out ' + (i++));
      temp.data.loadAll().then(result => {
          temp.accounts = result;
      });
  }, 1000);
  }

以下是您提供的HTML

<div class="col col-10"> 
      <div id="timer-box" id="timer"> 
         <h4 id="timer"> {{remaining}} </h4> 
      </div>
</div>

这是working example

另外

用箭头功能替换function(){..}以保持范围，就像我在答案中所做的那样。
无需在HTML部分中使用this来绑定值。

我的Ionic应用程序无法设置Null属性InnerHTML？

1 个答案: