Primeng p-dropdown 應在滾動文檔頁面上關閉

Question

將 p-table 內的 p-dropdown 作為列標題。 在滾動 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>

請對此提供幫助。

Answer 1

好吧，我也遇到了類似的要求，並且在實現了該功能之后。 考慮到以下情況，我們意識到它不是有效的。

考慮一下移動用戶，下拉菜單有帶有輸入框的搜索或過濾功能。

因此，每當用戶關注輸入字段時，它都會打開下拉菜單，同時打開移動鍵盤，減少視口並觸發滾動事件。 在滾動條上，您想關閉下拉菜單。 考慮到上述情況，它將處於我們必須避免的循環（打開-關閉）中。 如果您只有桌面用戶，那還好。

所以如果你只有一個桌面用戶，你可以實現這個

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 鏈接