Не можете установить свойство InnerHTML из Null в моем приложении Ionic?

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

И я получаю следующую ошибку

ОШИБКА TypeError: Невозможно установить для свойства 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>

Вот рабочий пример

Также

• Замените function(){..} на функцию стрелки, чтобы сохранить область видимости, как я делал в своем ответе.

• Нет необходимости использовать this в части HTML для привязки значения.