typescript 带有p-multiSelect的p-column过滤器不工作PrimengAngular 表

vecaoik1  于 2022-12-19  发布在  TypeScript
关注(0)|答案(1)|浏览(98)

有没有人能帮我找出为什么我的多选过滤器不起作用,请?多选正确显示不同的选项,值出现在列中哪个字段是“方向”。一旦我点击选项中的任何值,表使所有行消失,就好像关键字不存在于列“方向”的任何行中
我真的不明白这是为什么,以及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)
          );

如果我改变多选过滤器到正常的基本文本过滤器,它的工作和它的过滤的基础上,我键入,但没有运气与此多选选择器过滤器

hmmo2u0o

hmmo2u0o1#

我发现了问题所在。我在p-multiselect中添加了optionValue="direction"属性,现在它可以工作了!

相关问题