Could someone assist me in troubleshooting why my multiselect filter is not functioning correctly? The multiSelect displays the different options accurately, showing values from the "direction" column. However, when I select any value from the options, all rows in the table disappear as if the keyword is not present in any row within the "direction" column.
I am puzzled about this issue and uncertain about how exactly this p-multiSelect works, especially since the documentation lacks details. I have set it up precisely as shown here: https://www.primefaces.org/primeng/table/filter
The data in the column for the field direction appears like this ['SW', 'N', 'SW', 'NE'....] (24 strings in array)
This is HTML
<th pSortableColumn="direction">Wind Direction <p-sortIcon field="direction"></p-sortIcon>
<p-columnFilter field="direction" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-multiSelect [ngModel]="value" [options]="windDirections" placeholder="Any" (onChange)="filter($event.value)" optionLabel="direction">
<ng-template let-option pTemplate="item">
<div class="p-multiselect-wind-option">
<span class="pi pi-compass mr-5px"></span>
<span style="margin-left: 5px;">{{option.direction}}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter></th>
Here is TypeScript code
windDirections: Wind[];
this.windDirections = [ // options for the multiselect filter
new Wind('N'),
new Wind('NE'),
new Wind('NW'),
new Wind('S'),
new Wind('SW'),
new Wind('SE'),
new Wind('E'),
new Wind('W'),
];
// wind model
export class Wind {
constructor(public direction: string) {}
}
// Function formatting the wind direction column based on the direction
checkWindDirection(value) {
if (value >= 0 && value <= 22) {
return new Wind('N').direction;
} else if (value > 22 && value <= 67) {
return new Wind('NE').direction;
} else if (value > 67 && value <= 112) {
return new Wind('E').direction;
} else if (value > 112 && value <= 157) {
return new Wind('SE').direction;
} else if (value > 157 && value <= 202) {
return new Wind('S').direction;
} else if (value > 202 && value <= 247) {
return new Wind('SW').direction;
} else if (value > 247 && value <= 292) {
return new Wind('W').direction;
} else if (value > 292 && value <= 337) {
return new Wind('NW').direction;
} else return new Wind('N').direction;
}
// Subscribing to the function within ngOnInit which formats the wind direction based on a certain condition
const windDirections =
historicalWeatherData.hourly.winddirection_10m.map((item) =>
this.checkWindDirection(item)
);
If I switch the multiselect filter to a basic text filter, it filters based on what I type. However, the multiselect picker filter does not seem to be working.