Пример p-раскрывающийся список должен закрываться на странице прокрутки документа - PullRequest
Новая
       3

Пример p-раскрывающийся список должен закрываться на странице прокрутки документа

1 голос
/ 06 января 2020

Был p-раскрывающийся список, который находится внутри p-таблицы в качестве заголовка столбца. Во время прокрутки 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>

Пожалуйста, помогите в этом.

1 Ответ

0 голосов
/ 08 января 2020

Ну, я также выполнил аналогичное требование и после реализации этой функции. Мы поняли, что это неверно, учитывая ситуацию ниже.

Подумайте о мобильных пользователях и в раскрывающемся списке выберите функцию поиска или фильтрации с полем ввода.

Поэтому, когда пользователь фокусируется на В поле ввода откроется раскрывающееся меню и одновременно откроется клавиатура мобильного телефона, на которой уменьшены события просмотра и пожарной прокрутки. А на свитке вы хотите закрыть выпадающий список. Учитывая вышеизложенную ситуацию, мы должны избегать всего в oop (открытие-закрытие). И если у вас есть только пользователи настольных компьютеров, то это нормально.

Так что, если у вас есть только пользователи настольных компьютеров, вы реализуете это

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

здесь стек ссылка

...