primeNg DataTableヘッダーテンプレートの列（カスタムコントロール、ドロップダウン）がリセットされない

Question

primeNg DataTableのヘッダーにテンプレートがあります。私はグローバルフィルタのリセットボタンをした活動

に通常の列

正規テンプレート列

をリストする

1. カスタムのDateRangeフィルター（子）コンポーネント
2. ドロップダウン、上のすべてのフィルタリセットする必要があります。 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) 
     } 
    }