Question

我在primeNg DataTable的标题中有模板。

自定义DateRange过滤器（子）组件
下拉列表活动
常规栏
常规模板列

我有一个全局过滤器重置按钮，必须重置所有过滤器。 dataTable.reset()方法重置常规列（＃3）和常规模板自定义（＃4），但不重置其他标题控件（＃1，＃2）。

我尝试使用childComponent.Reset()选项调用@ViewChild，但我在运行时将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)
        }
    }

primeNg DataTable标头模板列（自定义控件，下拉列表）未重置

1 个答案: