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

Question

Hi I am trying to figure this out but have yet to do so. All help is much appreciated.

I have an element inside my component:

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

Then I have an ajax call that returns a string I bind the return string as such:

this.reportData = this.sanitizer.bypassSecurityTrustHtml(response);

Once the html data is rendered I want to access some nested elements like so:

@ViewChild('reportDisplayHost') reportDisplayHost: ElementRef<any>;
console.log(this.reportDisplayHost.nativeElement.querySelector('chart'));

I when I tried to do this I get a null but I see the element on the page.

<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>

How can I do this?

Thanks in advance!

Answer 1

After you assign this.reportData , you want to give Angular a chance to update the DOM before you start querying for child nodes.

You can call ChangeDetectorRef.detectChanges() to trigger a change detection run before you query for the updated 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'));

And here's a StackBlitz example .