Угловой доступ к данным после вызова 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'));

I, когда я попытался это сделать, я получаю 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 .