在这里，我试图获取打印屏幕中的值，但我得到的是空值我已在下面的屏幕截图中附加了。我只想在打印屏幕中获取值，或者是它的任何模块
这是我的 component.ts 文件
printDiv() {
const divContents = document.getElementById('dvContents').innerHTML;
const printWindow = window.open('', '');
printWindow.document.write('<html><head><title>Process Compensation Report</title>');
printWindow.document.write('</head><body style="color: black">');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
}
这里是 html 文件
<section id="dvContents" style="color: white;" class="form_cont">
<div class="container">
<div class="row mt-20">
<div class="col-md-4 col-sm-4 text-right res-tleft">
<label>Name</label>
</div>
<div class="col-md-4 col-sm-4">
<input type="text" [(ngModel)]="name" > **// this is not printing**
</div>
<div class="col-md-4 col-sm-4" *ngIf="arcButt">
<button class="btn btn-gradient-txt" type="button" (click)="archiveButt();">
<span style="font-size: 14px">
<i class="fa fa-file-archive-o"></i> Archive</span>
</button>
</div>
</div>
这是图片的屏幕截图，这里是打印结果，但输入框为空。
ScreenShot
最佳答案
问题不是(直接) Angular 。问题是您正在阅读innerHtml这只会为您提供 innerHtml 的信息可以给出 - 这些是标签上定义的属性的值。
让我解释一下。假设您有以下 html(暂时忘记 Angular):
<input type="text" value="42" >
这是一个输入字段，输入“text”。我们在其上应用了一个属性。
value="42"
现在，您假设更改输入字段的值会更改属性的值 - 也许您认为它们是相同的。这是一个常见的错误:实际上，对象(元素节点)的 (value) 属性是一回事，而 (value) 属性是另一回事。它们显然是相关的，但并不相同。
也许一个例子可以让这一点更清楚:
element.value = "42"
这会将元素的“值”属性设置为“42”。属性值不受影响。下面的代码会将属性的值设置为“42”
element.setAttribute("value", "42")
现在，大多数浏览器可能会检测到 DOM 上的值 attribute 的变化，并相应地更改实际元素上的值 property，但它们仍然是单独的标识.
Taken from Angular - HTML attribute vs. DOM property:
For example, when the browser renders
<input type="text" value="Bob">, it creates a corresponding DOM node with a value property initialized to "Bob".When the user enters "Sally" into the input box, the DOM element value property becomes "Sally". But the HTML value attribute remains unchanged as you discover if you ask the input element about that attribute:
input.getAttribute('value')returns "Bob".
作为证明，请考虑以下示例 - 它甚至不使用 Angular :
function showInnerHtml() {
console.log(document.getElementById('questionField').innerHTML);
}<div id="questionField">
<input id="questionField" type="text" value="420">
<button type="button" onClick="showInnerHtml()">Button</button>
</div>尝试更改输入字段中的值，然后按按钮。您将看到属性上的值不会反射(reflect)您的更改 - 只有属性会反射(reflect)您的更改。
因此，您尝试做的事情本身是不可能实现的。
也就是说，如果您确实需要的话，有一个可能的(没有必要在每个浏览器上工作)解决方法。 Angular 可以使用特殊的 [attr.name] 语法来绑定(bind)到属性值。这意味着您实际上可以创建到 HTML 属性值属性的绑定(bind)。
请，refer to this stackblitz for a quick POC of this ，如有需要，请随时要求更多说明。
关于javascript - 使用 angular5 打印屏幕无法获取其中的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52407059/