无法从innerHTML获取动态数据 - Angular [英] Can't get dynamic data from innerHTML - Angular
问题描述
我从我的视图或HTML中获取动态数据，将它放在我的页面上，以便我可以查看打印出来的数据。我必须使用这种方法，因为我正在用它上面的动态数据创建我自己的打印页面。我正在使用的方法抓取第一个初始值，而不是最新更新的DOM。如果我删除了.innerHTML，我可以看到动态数据，但是不确定是否有方法在没有.innerHTML的情况下获取该数据。
TS
点击（数据）{
this.newData = data
让printContents，popupWin;
if（document.getElementById（'print-section'）！= null）{
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>
< style>
//定制风格.......
< / style>
< / head>
< body onload = window.print（）; window.close（）> $ {printContents}< / body>
< / html>`
）;
popupWin.document.close（）;
}
}
HTML
< div id =print-sectionstyle =display：none>
< div>
< p> {{newData.id}}< / p>
< / div>
< / div>
检测机制没有更新到
this.newData 的更改与获取div内容的语句之间的DOM。 HTML输出将仅在当前执行周期后更新。 您可以使用多种技术强制更改检测（请参阅这个答案）。其中之一是通过调用 ChangeDetector.detectChanges（）。
顺便说一句，Angular访问DOM元素的方法在代码中使用 @ViewChild（varname）和模板引用变量，而不是调用 document.getElementById 。
< div #printSection style =display：none>
< div>
< p> {{newData.id}}< / p>
< / div>
< / div>
import {Component， '@ angular / core'中的ViewChild，ElementRef，ChangeDetectorRef};
导出类MyComponent {
@ViewChild（printSection）printSectionRef：ElementRef;
构造函数（private changeDetector：ChangeDetectorRef）{
}
点击（数据）{
this.newData = data
this.changeDetector .detectChanges（）; //触发器变化检测
让printContents，popupWin;
if（this.printSectionRef&& this.printSectionRef.nativeElement）{
printContents = this.printSectionRef.nativeElement.innerHTML;
...
}
}
}
I am grabbing dynamic data from my view or HTML placing it on my page so I can view the print out of said data. I have to use this method because I am creating my own print page with this dynamic data on it. The method that I am using grabs the first initial value and not the latest updated DOM. If I remove the .innerHTML I am able to see the dynamic data, however unsure if there's a way to get that data without .innerHTML.
TS
click(data){
this.newData = data
let printContents, popupWin;
if(document.getElementById('print-section') != null){
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();
}
}
HTML
<div id="print-section" style="display:none">
<div>
<p>{{newData.id}}</p>
</div>
</div>
You get the old content of the element because Angular's change detection mechanism did not update the DOM between the change to this.newData and the statement where you get the content of the div. The HTML output will be updated only after the current execution cycle.
You can force change detection with several techniques (see this answer). One of them is by calling ChangeDetector.detectChanges().
By the way, Angular's way to access DOM elements in code is with @ViewChild(varname) and template reference variables, instead of calling document.getElementById.
<div #printSection style="display:none">
<div>
<p>{{newData.id}}</p>
</div>
</div>
import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
export class MyComponent {
@ViewChild("printSection") printSectionRef: ElementRef;
constructor(private changeDetector: ChangeDetectorRef) {
}
click(data) {
this.newData = data
this.changeDetector.detectChanges(); // Trigger change detection
let printContents, popupWin;
if (this.printSectionRef && this.printSectionRef.nativeElement){
printContents = this.printSectionRef.nativeElement.innerHTML;
...
}
}
}
这篇关于无法从innerHTML获取动态数据 - Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
