Update innerhtml of element using viewchild in angular 2

问题

I have html element like

<section class="" #hiddenElement>
    <span>title</span>
    <span class="value"></span>
</section>

I access the element in component using

@ViewChild('hiddenElement') hiddenElement: ElementRef;

How do i update the innerhtml of element whose class is value?

回答1:

You can get hiddenElement children using nativeElement.children, filter them by className and modify their innerHTML using element.innerHTML

Something like this

Array
    .from(this.hiddenElement.nativeElement.children)
    .filter(c => c.className.includes('value'))
    .forEach(c => c.innerHTML = 'New innerHTML');

plnkr

来源：https://stackoverflow.com/questions/45667715/update-innerhtml-of-element-using-viewchild-in-angular-2