Primeng DataTable Dropdown不适用于通过列的选项 [英] Primeng DataTable Dropdown doesn't work with options via column
问题描述
我正在基于PrimeNG的DataTable为我的应用程序制作可重用的表组件.
I'm making a re-usable table component for my application based on DataTable from PrimeNG.
我的组件具有以下html代码:
My component has the following html code:
<p-dataTable [value]="cars" [rows]="5" [paginator]="true" [globalFilter]="gb" [(selection)]="selectedValue" (onRowSelect)="onRowSelect($event)" #dt>
<p-column *ngIf="hasSelectCheckbox" [style]="{'width':'38px'}" selectionMode="single"></p-column>
<p-column *ngIf="hasExpander" expander="true" styleClass="col-icon"></p-column>
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [sortable]="col.sortable" [filter]="col.hasFilter" filterPlaceholder="{{col.filterPlaceholder||'Search'}}" filterMatchMode="{{col.filterMatchMode}}">
<ng-template *ngIf="col.hasDropdownFilter" pTemplate="header" let-col>
<p-dropdown [options]="brands" appendTo="body" [style]="{'width':'100%'}" (onChange)="myfilter($event.value,col.field,col.filterMatchMode); dt.filter($event.value,col.field,col.filterMatchMode); " styleClass="ui-column-filter"></p-dropdown>
</ng-template>
</p-column>
</p-dataTable>
在.ts中,我有
cars: Car[] = [];
selectedValue: Car;
hasSelectCheckbox = true;
hasExpander = false;
brands: SelectItem[] = [];
cols: any[] = [];
ngOnInit() {
this.brands = [
{label: 'Select a Brand', value: null},
{label: 'VW1', value: 'VW1'},
{label: 'VW2', value: 'VW2'},
{label: 'VW3', value: 'VW3'},
{label: 'VW4', value: 'VW4'}
]
this.cols = [
// tslint:disable-next-line:max-line-length
{field: 'vin', header: 'Vin', sortable: true, hasFilter: true, filterPlaceholder: null, filterMatchMode: 'contains' , hasDropdownFilter: null, hasMultiSelectFilter: null, dropdownItems: null},
{field: 'year', header: 'Year', sortable: true, hasFilter: false, filterPlaceholder: null, filterMatchMode: 'contains' , hasDropdownFilter: null, hasMultiSelectFilter: null, dropdownItems: null},
// tslint:disable-next-line:max-line-length
{field: 'brand', header: 'Brand', sortable: false, hasFilter: false, filterPlaceholder: null, filterMatchMode: 'equals' , hasMultiSelectFilter: null, hasDropdownFilter: true, dropdownItems: this.brands },
{field: 'color', header: 'Color', sortable: true, hasFilter: false, filterPlaceholder: null, filterMatchMode: 'contains' , hasDropdownFilter: null, hasMultiSelectFilter: null, dropdownItems: null}
];
/* this.carService.getCarsSmall().then(cars => this.cars = cars); */
this.cars.push(
{vin: 'Somet0', year: 1998, brand: 'VW1', color: 'White1'},
/* fill some data*/
);
}
一切正常.
因为我想拥有一个可重用的组件,所以我希望下拉列表项取决于列项.但是,如果我使用col.dropdownItems
而不是brands
,则该下拉列表将不会收到这些项目.
As I want to have a re-usable component I want to make the dropdown items dependent on the column item. But if I use col.dropdownItems
instead of brands
, the dropdown doesn't receive the items.
有解决方案吗?
推荐答案
html中的"let-col"以某种方式干扰了我的可迭代变量"col".我在所有情况下都将"col"的名称更改为"itemCol",问题已解决.
Somehow the "let-col" in html was interfering in my iterable variable "col". I changed the name of "col" to "itemCol" in all its instances and the problem was solved.
这篇关于Primeng DataTable Dropdown不适用于通过列的选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!