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

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

javascript angular

Javascript 使用angular5打印屏幕无法获取其中的值,javascript,angular,angular5,Javascript,Angular,Angular5,在这里，我试图在打印屏幕中获取值，但我得到的是空值，我在屏幕截图下方附加了空值。我只想在打印屏幕中获取值，或者是它的任何模块这是我的component.ts文件 printDiv() { const divContents = document.getElementById('dvContents').innerHTML; const printWindow = window.open('', ''); printWindow.document.write('<

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

这是我的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(); }

printDiv（）{ const divContents=document.getElementById（'dvContents'）.innerHTML；常量printWindow=window.open（“”，”）； printWindow.document.write（‘过程补偿报告’）； printWindow.document.write（“”）； printWindow.document.write（divContents）； printWindow.document.write（“”）； 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>

名称 **//这不是印刷品** 档案文件

这里是图片的截图，这里我得到了打印，但输入框是空的。
截图问题不是（直接）角度的。问题是您正在阅读
innerHtml
，它只会为您提供
innerHtml
所能提供的信息，即标记上定义的属性的值
让我解释一下。假设您有以下html（暂时忘记angular）：
现在，您假设更改输入字段的值将更改属性的值-也许您认为它们是相同的。这是一个常见错误：实际上，对象（元素节点）的（value）属性是一回事，（value）属性是另一回事。它们显然是相关的，但并不相同
也许一个例子可以让这一点更清楚：

element.value = "42"
这将把元素的“value”属性设置为“42”。属性值不受影响。以下内容将把属性的值设置为“42”
现在，大多数浏览器可能会检测到DOM上的value属性的更改，并相应地更改实际元素上的value属性，但它们仍然是独立的标识
摘自：
例如，当浏览器呈现
时，它会创建一个相应的DOM节点，其值属性初始化为“Bob”
当用户在输入框中输入“Sally”时，DOM元素值属性变为“Sally”。但是HTML值属性保持不变，因为如果您询问输入元素该属性：
input.getAttribute（'value'）
返回“Bob”
作为一个证明，请考虑下面的样本——甚至不使用角：

函数showInnerHtml（）{ log（document.getElementById（'questionField'）.innerHTML）； }

按钮
问题不是（直接）角度问题。问题是您正在阅读
innerHtml
，它只会为您提供
innerHtml
所能提供的信息，即标记上定义的属性的值
让我解释一下。假设您有以下html（暂时忘记angular）：
现在，您假设更改输入字段的值将更改属性的值-也许您认为它们是相同的。这是一个常见错误：实际上，对象（元素节点）的（value）属性是一回事，（value）属性是另一回事。它们显然是相关的，但并不相同
也许一个例子可以让这一点更清楚：

element.value = "42"
这将把元素的“value”属性设置为“42”。属性值不受影响。以下内容将把属性的值设置为“42”
现在，大多数浏览器可能会检测到DOM上的value属性的更改，并相应地更改实际元素上的value属性，但它们仍然是独立的标识
摘自：
例如，当浏览器呈现
时，它会创建一个相应的DOM节点，其值属性初始化为“Bob”
当用户在输入框中输入“Sally”时，DOM元素值属性变为“Sally”。但是HTML值属性保持不变，因为如果您询问输入元素该属性：
input.getAttribute（'value'）
返回“Bob”
作为一个证明，请考虑下面的样本——甚至不使用角：

函数showInnerHtml（）{ log（document.getElementById（'questionField'）.innerHTML）； }

按钮
tq@SPArchaeologist。这正是我所需要的。我是这样做的[attr.property]=“value”，即[att.value]=“name.tq@SPArchaeologist”。这正是我所需要的。我是这样做的[attr.property]=“value”即[att.value]=“name”。
element.value = "42"

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