有没有人能帮我找出为什么我的多选过滤器不起作用,请?多选正确显示不同的选项,值出现在列中哪个字段是“方向”。一旦我点击选项中的任何值,表使所有行消失,就好像关键字不存在于列“方向”的任何行中
我真的不明白这是为什么,以及p-multiSelect究竟是如何工作的,文档中关于它的内容相当少。
字段方向的列数据类似于['SW','N','SW','NE'...].(数组中有24个字符串)
这是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>
这里是TS
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) {}
}
// here is function which format 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;
}
// then in ngOnInit subscribe i am using the above function like this which then is pushed to weatherData array and weatherData is used in [value] for table to make the columns
const windDirections =
historicalWeatherData.hourly.winddirection_10m.map((item) =>
this.checkWindDirection(item)
);
如果我改变多选过滤器到正常的基本文本过滤器,它的工作和它的过滤的基础上,我键入,但没有运气与此多选选择器过滤器
1条答案
按热度按时间hmmo2u0o1#
我发现了问题所在。我在p-multiselect中添加了
optionValue="direction"
属性,现在它可以工作了!