primeNg DataTable標題模板列（自定義控件，下拉列表）沒有得到重置

Question

我在primeNg DataTable的標題中有模板。

1. 自定義過濾DATERANGE（子）組件
2. 下拉列出活動
3. 專欄
4. 普通模板列

我有一個全局篩選重置按鈕，在其所有過濾器必須重置。 dataTable.reset()方法重置常規列（＃3）和常規模板自定義（＃4），但不重設其他標題控件（＃1，＃2）。

我試圖調用childComponent.Reset()使用@ViewChild選項，但我在運行時得到childComponent爲"undefined"。我可以看到@ViewChild選項正在爲dataTable之外的常規子控件工作。

如何以正確的方式重置primeNg數據表中的所有控件？

<p-column field="updatedOn" header="Updated On" sortable="custom" (sortFunction)="dateSort($event)" [style]="{'width':'180px'}" filter="true" filterMatchMode="contains"> 
     <template pTemplate="filter" let-col> 
      <date-range-filter #dateRangeFilter (dateRangeUpdated)="onRangeUpdated($event)"></date-range-filter> 
     </template> 
     <template let-col let-val="rowData" pTemplate="body"> 
      <div class="bodyText"> 
       {{val[col.field] | date: 'MM/dd/yyyy hh:mm a'}} 
      </div> 
     </template> 
    </p-column> 
    <p-column field="activity" header="Activity" sortable="true" filter="true" filterMatchMode="equals" [style]="{'width':'100px', 'overflow':'visible'}"> 
     <template pTemplate="filter" let-col> 
      <p-dropdown #activityType appendTo="body" [options]="_activityList" [style]="{'width':'100%'}" (onChange)="memoTable.filter($event.value,col.field,col.filterMatchMode)" 
       styleClass="ui-column-filter"></p-dropdown> 
     </template> 
     <template let-col let-val="rowData" pTemplate="body"> 
      <span class="ActivityBox" [ngClass]="getActivityColor(val[col.field])">{{getActivityType(val[col.field])}}</span> 
     </template> 
    </p-column> 
    <p-column field="User" header="User" sortable="true" filter="true" filterMatchMode="contains" [style]="{'width':'95px'}"></p-column> 
    <p-column field="comment" header="comment" sortable="true" filter="true" filterMatchMode="contains"> 
     <template let-col let-val="rowData" pTemplate="body"> 
      <div> 
       <div class="NotesColumn" [ngClass]="val[col.field].length > 15? 'underlined' : ''" (mouseenter)="op.show($event)" (mouseleave)="op.hide($event)"> 
        {{val[col.field]}} 
       </div> 
       <p-overlayPanel #op [styleClass]="overlayDiv" [appendTo]="overlayTarget"> 
        <div class="overlayDiv"> 
         {{val[col.field]}} 
        </div> 
       </p-overlayPanel> 
      </div> 
     </template> 
    </p-column> 

Answer 1

我已經找到了解決這個問題的自定義組件清除控件的問題。

1. Use ElemenRef to get hold of the elements on the page. 
    constructor(private _element: ElementRef) {} 

    // Clear all filters from DataTable 
    clearAllFilters(dataTable: DataTable) { 
     dataTable.reset() 
     dataTable.globalFilter.value = '' 
     DateRangeComponent.clearDateFilter(this._element) 
    } 

2. Use querySelector to get the control.  
    public static clearDateFilter(pageElement: ElementRef) { 
     let dri = pageElement.nativeElement.querySelector('#dateRangeInput') 
     dri.value = "" 
     dri.tooltipText = "" 

     // Dispatch a 'change' event to trigger onSearchKeyUp method to clear filter based on date range. 
     var event = new Event('change') 
     dri.dispatchEvent(event) 

     // Another way of doing this is dri.focus() followed by dri.blur() to fire change event. 
    } 

    // Html dateRangeInput Control 
    <input #dateRangeInput class="theInput" id="dateRangeInput" type="text" placeholder="Search" pTooltip="{{_dateRangeInputText}}" 
     tooltipPosition="top" (keyup)="onSearchKeyUp($event)" (change)="onSearchKeyUp($event)" (keydown)="onSearchKeyDown($event)"> 

    // The below code is just test logic to ensure the control is reset 
    // and an event is emitted back to the parent component. 
    private onSearchKeyUp(event: any) { 
     let input = event.target.value 

     if (input.length === 0) { 
      this.reset() 
      this.dateRangeUpdated.emit(this) 
     } 
    }