您好,我正在尝试解决这个问题,但还没有这样做。非常感谢所有帮助。
我的组件中有一个元素:
<div [innerHtml]="reportData" class="widget" #reportDisplayHost></div>
然后我有一个返回字符串的 ajax 调用,我这样绑定(bind)返回字符串:
this.reportData = this.sanitizer.bypassSecurityTrustHtml(response);
呈现 html 数据后,我想像这样访问一些嵌套元素:
@ViewChild('reportDisplayHost') reportDisplayHost: ElementRef<any>;
console.log(this.reportDisplayHost.nativeElement.querySelector('chart'));
当我尝试这样做时,我得到了一个 null 但我在页面上看到了该元素。
<chart exportenabled="1" showalternatehgridcolor="0" basefontsize="11" basefont="Roboto" showborder="0" bgcolor="#ffffff" showshadow="0" use3dlighting="0" legendshadow="0" legendbordercolor="ffffff" showlegend="1" useplotgradientcolor="0" showplotborder="0" showcanvasborder="0" palettecolors="26478d" useroundedges="0" labeldisplay="Rotate" slantlabels="1" yaxismaxvalue="100" yaxisminvalue="0" showvalues="1" yaxisname="Score" xaxisname="Month" caption="Quarterly Score Trends">
<set name="APR-JUN" value="4"> </set>
<set name="JUL-SEP" value="7"> </set>
<set name="OCT-DEC" value="3"> </set>
<set name="JAN-MAR" value="3"> </set>
</chart>
我该怎么做?
提前致谢!
最佳答案
在分配 this.reportData
之后,您希望在开始查询子节点之前让 Angular 有机会更新 DOM。
您可以调用ChangeDetectorRef.detectChanges()
在查询更新的 DOM 之前触发更改检测运行:
constructor(private cd: ChangeDetectorRef, private sanitizer: DomSanitizer) {}
// ...
this.reportData = this.sanitizer.bypassSecurityTrustHtml(html);
// Update the DOM
this.cd.detectChanges();
// Now we can access the updated DOM
console.log(this.reportDisplayHost.nativeElement.querySelector('chart'));
这是一个 StackBlitz example .
关于javascript - 在 ajax 调用和 html 呈现之后 Angular 访问数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55008822/