使用angular5打印屏幕无法获取其中的值

Question

我在这里尝试获取打印屏幕中的值，但我得到的是空值 ，我在屏幕截图 下方附加了这些值。我只想在打印屏幕上获取值，或者是它的任何模块

这是我的 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

Answer 1

问题不是（直接）angular。问题是您正在阅读 innerHtml，它只会为您提供 innerHtml 可以提供的信息 - 这些是标签上定义的属性的值.

让我解释一下。假设您有以下 html（暂时忘记 angular）：

<input type="text" value="42" >

这是一个输入字段，输入“文本”。我们在上面应用了一个属性。

value="42"

现在，您假设更改输入字段的值会更改属性的值 - 也许您认为它们是相同的。这是一个常见的错误：实际上，对象（元素节点）的 (value) 属性是一回事， (value) 属性是另一回事。它们显然是相关的，但又不相同。

也许举个例子可以更清楚地说明这一点：

element.value = "42"

这会将元素的“值”属性设置为“42”。属性值不受影响。以下改为将属性的值设置为“42”

element.setAttribute("value", "42")

现在，大多数浏览器可能会检测 DOM 上的值属性的变化，并更改值属性在相应的实际元素上，但它们仍然是独立的标识。

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>

尝试更改输入字段中的值，然后按下按钮。您会看到属性上的值不会反映您的更改 - 只有属性会。

所以，你试图做的事情本身是不可能的。

就是说，如果您真的必须这样做，有一个可能的解决方法（不一定适用于所有浏览器）。 Angular 可以使用特殊的 [attr.name] 语法绑定到属性值。这意味着您实际上可以创建到 HTML 属性值属性.

的绑定

拜托，refer to this stackblitz for a quick POC of this，如有需要，请随时提出更多说明。

使用angular5打印屏幕无法获取其中的值

print screen using angular5 unable to get values in it

javascript

angular

angular5