primeNg DataTable 헤더 템플릿 열 (사용자 정의 컨트롤, 드롭 다운)이 재설정되지 않습니다.

Question

primeNg DataTable의 헤더에 템플릿이 있습니다.

(아이) 구성 요소
1. 드롭 다운 활동을 나열하는
2. 사용자 정의 DATERANGE 필터
3. 정기 열
4. 정규 템플릿 열

나는 글로벌 필터 리셋 버튼을했습니다하는 모든 필터에 재설정해야합니다. dataTable.reset() 메서드는 일반 열 (# 3) 및 일반 템플릿 사용자 지정 (# 4)을 재설정하지만 다른 머리글 컨트롤 (# 1, # 2)은 다시 설정하지 않습니다.

나는 @ViewChild 옵션을 사용하여 childComponent.Reset()을 호출하려고 시도했지만, 실행시 childComponent이 "undefined"으로 표시됩니다. @ViewChild 옵션이 dataTable 외부의 일반 하위 컨트롤에서 작동하는 것을 볼 수 있습니다.

올바른 방법으로 primeNg DataTable의 모든 컨트롤을 어떻게 재설정 할 수 있습니까?

<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) 
     } 
    }