Question

我正在使用支持Angular 4的PrimeNG 4.x.x.我想动态地为DataTable列中的多选过滤器提供值。

如下所示，我正在从'clientcolumnDefs'动态创建表列，现在我想动态地为多选过滤器选项提供值。

<p-dataTable #clientTable [value]="clientrowData" selectionMode="single" [(selection)]="selectedClient" dataKey="id" [contextMenu]="cm">
			<p-column *ngFor="let col of clientcolumnDefs" [field]="col.field" [header]="col.header" sortable="true" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}">
				<ng-template pTemplate="filter" let-col>
					<p-multiSelect  [options]="dynamicaFilters" defaultLabel="All" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
				</ng-template>
			</p-column>
</p-dataTable>

如何在typescript中填充 dynamicFilters ，以便它适用于所有列。

过滤器应该是这种类型，但每列的值都是动态的。

filter image

Answer 1

dynamicaFilters应该是一个多维数组。在ts文件中，您需要获取每列的不同值并将它们插入临时数组，然后将该临时数组插入dynamicaFilters。

您的HTML代码也将更改为 -

<p-column *ngFor="let col of clientcolumnDefs; let i= index" [field]="col.field" [header]="col.header" sortable="true" [filter]="true" filterMatchMode="in" [style]="{'overflow':'visible'}">
            <ng-template pTemplate="filter" let-col>
                <p-multiSelect  [options]="dynamicaFilters[i]" defaultLabel="All" (onChange)="dt.filter($event.value,col.field,col.filterMatchMode)" styleClass="ui-column-filter"></p-multiSelect>
            </ng-template>
        </p-column>

我自己没有机会尝试这个，如果您有任何问题，请告诉我。

具有动态值的PrimeNG DataTable多选滤波器

1 个答案: