PrimeNG DataTable фильтр множественного выбора с динамическими значениями

Я использую PrimeNG 4.x.x с поддержкой Angular 4. Я хочу динамически предоставлять значения для множественного выбора фильтра в столбце 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>

Как мне заполнить мои динамические фильтры в машинописном тексте, чтобы он работал для всех столбцов.

Фильтры должны быть этого типа, но значения будут динамическими для каждого столбца.

отфильтровать изображение


angular primeng primeng-datatable
person Soumik    schedule 22.05.2017    source источник
comment
Мне нужен аналогичный функционал для Primeng ‹p-table›   -  person Mak    schedule 26.07.2021

Ответы (1)


arrow_upward
2
arrow_downward

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>

У меня не было возможности попробовать это сам, дайте мне знать, если у вас возникнут вопросы.

person karthiks3000    schedule 06.07.2017