如何清除 Angular2 中选择器中的 DOM 内容

Question

我正在尝试加载包裹在 Angular2 组件中的 Kenod Pivot 网格。我根据按钮单击事件等用户事件加载 kenod 网格。当我第一次加载 kendo 网格时，它加载正常。但是当用户重复单击按钮时，我希望删除以前加载的网格内容并加载具有最新数据的新网格。相反，它的行为方式是将新网格附加或加载到先前加载的网格的正下方。请找到有关加载同一组件的多个实例的快照

我尝试了以下代码来清除指定选择器中现有的 DOM 内容。

 this.temp = jQuery(this.elementRef.nativeElement).children('#pivotgrd').html('');
this.dataSource = ... //assign json values to this...

this.pivotgrid = jQuery(this.elementRef.nativeElement).find('#pivotgrd').kendoPivotGrid(
            this.dataSource
         ).data("kendoPivotGrid");

HTML中的选择器加载

<div>
    <div id="pivotgrd" class="hidden-on-narrow"></div>
</div>

但它没有按预期工作。

请告诉我如何清除之前加载的内容。

Answer 1

以下是使用 jquery 删除 DOM 元素的方法。在将新内容添加到数据透视表之前调用此方法

jQuery('#pivotgrd').children().remove()

如何清除 Angular2 中选择器中的 DOM 内容

How do I clear the DOM contents inside a selector in Angular2

angular2-directives

angular