Primeng p-下拉列表应该在滚动文档页面上关闭

Question

有p-dropdown，它在p-table内作为列标题。滚动 p 表时，p 下拉列表应关闭。

<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();
}
}

这是堆栈闪电战链接