打印 Angular 4 表格 - 输入值为空答案

【问题标题】：Printing angular 4 forms - input values are empty打印 Angular 4 表格 - 输入值为空
【发布时间】：2017-12-15 17:19:10
【问题描述】：

我有一个标准的 angular 4 表单，其中包含许多与 [(ngModel)] 指令绑定的字段。我还需要提供自定义打印功能，通过（简化以使其看起来更清晰）实现：

let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <style>
          //........Customized style.......
          </style>
        </head>
<body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
popupWin.document.close();

这很好用，除了在打印输出中，表单不显示任何值，就好像表单完全空白，即使问题得到了回答。我怀疑这是因为输入字段的实际值为 null，因为我使用 ngModel 在幕后设置此值，但是如何使用 angular 解决此打印问题？

【问题讨论】：

标签： angular angular-forms

【解决方案1】：

由于找不到解决方案，我实施了一种解决方法：每个输入元素都有一个“无打印”类，并为每个输入元素创建一个元素（样式 div 用于文本输入，图像用于单选框和复选框）仅在打印模式下可见。这可行，但如果有人能想到更好的解决方案，请随时分享。

【讨论】：