ajax调用和html渲染后的角度访问数据

Question

您好，我正在尝试解决这个问题，但还没有这样做。非常感谢所有帮助。

我的组件中有一个元素：

 <div [innerHtml]="reportData" class="widget" #reportDisplayHost></div>

然后我有一个返回字符串的ajax调用我将返回字符串绑定为：

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">&nbsp;</set>
<set name="JUL-SEP" value="7">&nbsp;</set>
<set name="OCT-DEC" value="3">&nbsp;</set>                                                                                                                           
<set name="JAN-MAR" value="3">&nbsp;</set>   
</chart>

我该怎么做？

提前致谢！

Answer 1

在分配this.reportData 之后，您希望在开始查询子节点之前让 Angular 有机会更新 DOM。

您可以在查询更新后的 DOM 之前调用 ChangeDetectorRef.detectChanges() 触发更改检测运行：

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。