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

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

让我解释一下。假设您有以下html（暂时不了解Angular）：

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

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

value="42"

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

也许一个例子可以使这一点更清楚：

element.value = "42"

这会将元素的“值” 属性设置为“ 42”。属性值不受影响。相反，以下代码会将属性的值设置为“ 42”

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

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

来自Angular - HTML attribute vs. DOM property ：

例如，当浏览器呈现<input type="text" value="Bob">时，它将创建一个对应的DOM节点，其value属性初始化为“ Bob”。

当用户在输入框中输入“ Sally”时，DOM元素的value属性将变为“ Sally”。但是，如果您询问输入元素有关该属性的信息，HTML值属性将保持不变：input.getAttribute('value')返回“ 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属性value属性的绑定。

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

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

1 个答案: