Question

我基于PrimeNG的DataTable为我的应用程序创建了一个可重用的表组件。

我的组件有以下HTML代码：

<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，则下拉列表不会收到这些项目。

有解决方法吗？

Answer 1

不知何故，＆＃34; let-col＆＃34;在html中干扰了我的可迭代变量＆＃34; col＆＃34;。我更改了＆＃34; col＆＃34; to＆＃34; itemCol＆＃34;在所有情况下，问题都解决了。

Primeng DataTable Dropdown不能通过列使用选项

1 个答案: