Angular 5: разница между консолью и шаблоном

Question

Я пытаюсь скрыть два столбца с помощью директивы ngIf при печати страницы.

Когда я нажимаю кнопку печати, я переключаю значение булевой переменной ' print ' на true, затем выполняю функцию преобразования в PDF.

  <div class="portlet light">
      <button class="btn btn-danger noprint pull-right" style="margin-bottom: -30px; " (click)="print_table()"> <i class="fa fa-print"></i> Imprimer</button>
      {{print}}
  </div> 

Функция преобразования в PDF:

convertToPdf() {
 const element = document.getElementById('contentToConvert');
 const opt = {
  margin: 0.2,
  filename: 'myfile.pdf',
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: { scale: 2, width: 1282 },
  jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
 };

 // New Promise-based usage:
 html2pdf().from(element).set(opt).save();

}

Проблема в том, что даже если значение изменилось в консоли, оно не отображается в шаблоне.

print_table() {
 this.print = true;
 setTimeout(this.convertToPdf, 2000);
 setTimeout(this.toFalse, 5000);
}

toFalse() {
 this.print = false;
 console.log(this.print);
}

Результат:
Значение 'print' изменяется только один раз, поэтому столбцы остаются скрытыми после функции печати, зная, что я вызвал toFalse() функцию, чтобы показать их.

Answer 1

this в toFalse будет объектом окна, если вы передадите его ссылку на setTimeout, потому что setTimeout и setInterval выполняются в глобальной области видимости.

В вашей функции print_table() вызовите функцию toFalse() непосредственно внутри ссылки на анонимную функцию вместо передачи ссылки на нее, т. Е.:

print_table() {
 this.print = true;
 setTimeout(this.convertToPdf, 2000);
 setTimeout(()=>{this.toFalse()}, 5000);
}