时间戳

首页 > 解决方案 > Primeng p-dropdown 应在滚动文档页面上关闭

javascript - Primeng p-dropdown 应在滚动文档页面上关闭

问题描述

有 p-dropdown，它位于 p-table 内作为列标题。在滚动 p-table 时，p-dropdown 应该关闭。

<p-table #dTable [columns]="cols">
<ng-template pTemplate="header">
  <tr class="table-header-row">
    <th *ngFor="let col of cols" [ngStyle]="{'width': col.widthPer ? col.widthPer + '%' : col.widthPx + 'px'}">
      {{col.header}}
    </th>
  </tr>
  <tr class="table-header-row">
    <th *ngFor="let col of cols" [ngSwitch]="col.field"
      [ngStyle]="{'width': col.widthPer ? col.widthPer + '%' : col.widthPx + 'px'}">
      <input [(ngModel)]="designNameFilterValue" *ngSwitchCase="'designName'" pInputText class="design-name-filter"
        (keyup)="refreshTree(hideNonSelected, defaultFilter)">
      <div *ngSwitchCase="'cost'">
        Value >= {{cost| currency}}
        <i class="fa fa-close"
          (click)="costFilterValue = 0; refreshTree(hideNonSelected, defaultFilter);"
          style="cursor:pointer" *ngIf="costFilterValue"></i>
        <p-slider [(ngModel)]="cost" [min]="0" [max]="maxCost"
          (onSlideEnd)="refreshTreeTable(hideNonSelected, defaultFilter)"></p-slider>
      </div>
      <p-dropdown class="filter" *ngSwitchCase="'risk'" [options]="filterdropdown" (click)="hide()"
        [(ngModel)]="FilterValue" (onChange)="refreshTree(hideNonSelected, defaultFilter)">
      </p-dropdown>
      <p-dropdown class="state-filter" *ngSwitchCase="'state'" [options]="stateItemsForFilterDropDown"
        (click)="hide()" [(ngModel)]="defaultFilter"
        (onChange)="refreshTree(hideNonSelected, defaultFilter)">
      </p-dropdown>
    </th>
  </tr>
</ng-template>

请在这方面提供帮助。

标签： javascriptangularprimeng

解决方案

好吧，我也遇到了类似的要求，并且在实现了该功能之后。考虑到以下情况，我们意识到它不是有效的。

想想移动用户，下拉菜单有一个输入框的搜索或过滤功能。

因此，每当用户关注输入字段时，它都会打开下拉菜单，同时打开移动键盘，从而减少视口和触发滚动事件。在滚动条上，您要关闭下拉菜单。考虑到上述情况，它将处于我们必须避免的循环（开闭）中。如果您只有桌面用户，那也没关系。

所以如果你只有一个桌面用户，你实现这个

app.component.ts

import { Component , Inject} from "@angular/core";
import { FormBuilder } from "@angular/forms";
import { HostListener} from "@angular/core";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  cities1 = [];
  constructor() {
    this.cities1 = [
            {label:'Select City', value:null},
            {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
            {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
            {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
            {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
            {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
        ];
  }
  @HostListener("window:scroll", [])
  onWindowScroll() {
    const ele = document.getElementById('mydiv');
    ele.click();
  }
}

这是stackblitz链接

推荐阅读