Primeng DataTable下拉菜單不能使用列

選項我基於PrimeNG的DataTable爲我的應用程序創建一個可重用的表組件。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*/ 
 
     ); 
 
     
 
     }

而這一切都worki NG。

因爲我想要一個可重用的組件，我想使下拉項目依賴於列項目。但是，如果我使用「col.dropdownItems」而不是「品牌」，則下拉列表不會收到這些項目。

有沒有解決方案？

來源

2017-07-24 Gabriel Costa

點擊所有標籤，閱讀他們的描述。你全部使用它們嗎？ – Kukeltje

這取決於我將有哪種類型的collum –

不知何故，html中的「let-col」干擾了我的可迭代變量「col」。我在其所有實例中將「col」的名稱更改爲「itemCol」，並解決了問題。

來源

2017-07-25 18:37:29

Primeng DataTable下拉菜單不能使用列

回答

相關問題