javascript - 在 ajax 调用和 html 呈现之后 Angular 访问数据

Question

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

我的组件中有一个元素:

 <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">&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。

您可以调用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 .