使用角度2中的viewchild更新元素的innerhtml

【问题标题】：Update innerhtml of element using viewchild in angular 2使用角度2中的viewchild更新元素的innerhtml
【发布时间】：2018-01-21 21:22:34
【问题描述】：

我有像

这样的 html 元素

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

我使用

访问组件中的元素

@ViewChild('hiddenElement') hiddenElement: ElementRef;

如何更新class为value的元素的innerhtml？

【问题讨论】：

标签： angular viewchild

【解决方案1】：

你可以使用nativeElement.children获取hiddenElementchildren，通过className过滤它们并使用element.innerHTML修改它们的innerHTML

类似的东西

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

plnkr

【讨论】：