时间戳

首页 > 解决方案 > Angular 5：控制台和模板之间的区别

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

问题描述

在打印页面时，我试图在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);
}

结果：
value 的值'print'仅更改一次，因此在 print 函数知道我调用toFalse()函数来显示它们之后列保持隐藏。

标签： javascriptangular

解决方案

thisintoFalse将是窗口对象，如果您将其引用传递给setTimeout因为setTimeout并setInterval在全局范围内运行。

在您的函数中，直接在匿名函数的引用内print_table()调用函数，而不是传递它的引用，即：toFalse()

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

推荐阅读