PrimeNG下拉菜单-禁用某些SelectItems [英] PrimeNG dropdown - disable certain SelectItems

问题描述

是否可以禁用某些 PrimeNG的下拉项(SelectItems)?

Is there an option to disable some of PrimeNG's dropdown items (SelectItems)?

我注意到此讨论，有什么变化吗?

I notice this discussion, is something changed?

推荐答案

这是我的解决方法:

1) 扩展原始 SelectItem的界面(参考)，因此具有disabled属性，因此合并的界面看起来像

1) extend original SelectItem's interface (reference) with disabled property, so merged interface will look like

interface SelectItem {
  label: string;
  value: any;
  disabled: boolean;
}

这可以通过声明具有相同名称的新接口来完成:

this may be done by declaring new interface with the same name:

interface SelectItem {
  disabled: boolean;
}

2) 基于p-dropdown 组件的模板，修改模板的这一部分:

2) based on p-dropdown component's template, modify this part of template:

<li *ngFor="let option of optionsToDisplay;let i=index" 
    [ngClass]="{'ui-dropdown-item ui-corner-all':true, 'ui-state-highlight':(selectedOption == option), 
                        'ui-dropdown-item-empty':!option.label||option.label.length === 0}"
    (click)="onItemClick($event, option)">
  <span *ngIf="!itemTemplate">{{option.label||'empty'}}</span>
  <ng-template [pTemplateWrapper]="itemTemplate" 
               [item]="option" 
               *ngIf="itemTemplate"></ng-template>
</li>

通过添加至<4>的指令，所以，当选项被设置为禁用，‘禁用’CSS类将被添加到元素. 另外，不应通过单击禁用的选项来触发onItemClick($event, option)，并且应将itemClick标志设置为true，这将防止下拉菜单关闭.这可以通过将click函数重写为

by adding disabled: option.disabled to li's ngClass directive, so when option is set to disabled, 'disabled' CSS class will be added to the il element. Also, onItemClick($event, option) should not be triggered by clicking on disabled options, and itemClick flag should be set to true, which will prevent dropdown closing. This can be achieved by rewriting the click function to

(click)="!option.disabled && onItemClick($event, option) || itemClick = true"

下拉菜单关闭由 onMouseclick($event)函数，它具有以下条件:

dropdown closing is done by onMouseclick($event) function, which has following condition:

if (!this.itemClick) {
  ...
}

因此，将禁用选项的itemClick标志设置为true可以防止在单击禁用项时关闭下拉菜单.

so, setting itemClick flag true for disabled options will prevent dropdown closing when clicking on disabled items.

这可以通过使用

This may be done by using metadata reflection API. Import Dropdown class and get its metadata:

import { DropdownModule, Dropdown, SelectItem } from 'primeng/primeng';

...

// modify dropdown component's template
Reflect.getMetadata('annotations', Dropdown).forEach(annotation => {
  if (annotation.constructor.name === 'DecoratorFactory') {
    // add 'disabled' CSS class for disabled options
    annotation.template = annotation.template.replace("'ui-dropdown-item ui-corner-all':true, ", "'ui-dropdown-item ui-corner-all':true, disabled: option.disabled, ");
    // do not trigger click function on disabled options and set itemClick flag to prevent dropdown closing
    annotation.template = annotation.template.replace('(click)="onItemClick($event, option)"', '(click)="!option.disabled && onItemClick($event, option) || itemClick = true"');
  }
}); 

3) 为禁用的项目添加所需的CSS，例如:

3) add desired CSS for disabled items, for example:

.ui-dropdown-item.ui-corner-all.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

就是这样:) 已在primeng@4.1.2上测试

That is it :) Tested on primeng@4.1.2

plunker: https://plnkr.co/edit/0Pqq565BPowABUauW7Y7

这篇关于PrimeNG下拉菜单-禁用某些SelectItems的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！