1

我正在使用支持 Angular 4 的 PrimeNG 4.xx。我想动态地为 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，以便它适用于所有列。

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

过滤图像

4

1 回答 1

2

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>

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

于 2017-07-06T21:38:21.343 回答