Angular 5：控制台和模板之间的区别

Question

I'm trying to hide two columns by the help of the ngIf directive when printing the page.

When I press the print button, I switch the value of the boolean variable ' print ' to true then I execute the function that convert to 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> 

Function that convert to 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();

}

The problem is that even when the value changed in the console, it doesn't in the templete.

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

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

Result:
The value value of 'print' changes just once so the columns stay hidden after the print function knowing that I called toFalse() function to show them.

Answer 1

this in toFalse will be the window object if you pass its reference to setTimeout because setTimeout and setInterval run in the global scope.

In your print_table() function, call toFalse() function directly inside the reference of an anonymous function instead of passing a reference of it ie :

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