Primeng DataTable Dropdown funktioniert nicht mit Optionen über die Spalte

Question

Ich mache eine wiederverwendbare Tabellenkomponente für meine Anwendung basierend auf DataTable von PrimeNG.

Meine Komponente hat den folgenden 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>

Und in .ts Ich habe

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*/ 
 
     ); 
 
     
 
     } 
 
     
 
    

Und es ist alles worki ng.

Da ich eine wiederverwendbare Komponente haben möchte, möchte ich die Dropdown-Elemente abhängig von der Spalte Element machen. Aber wenn ich "col.dropdownItems" anstelle von "brands" verwende, erhält das Dropdown die Artikel nicht.

Gibt es dafür eine Lösung?

Answer 1

Irgendwie störte das "let-col" in html meine iterierbare Variable "col". Ich habe den Namen von "col" in allen Instanzen in "itemCol" geändert und das Problem wurde gelöst.