PrimeNG 下拉菜单 - 禁用某些 SelectItems

Question

是否有禁用 PrimeNG 的一些下拉项 (SelectItems) 的选项？

我注意到 this discussion，有什么变化吗？

Answer 1

这是我的解决方法：

1) 用 disabled 属性扩展原始 SelectItem's interface (reference)，所以合并后的界面看起来像

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

这可以通过声明同名的新接口来完成：

interface SelectItem {
  disabled: boolean;
}

2) 基于p-dropdowncomponent's 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>

by adding disabled: option.disabled to li's ngClass directive, so when option is set to disabled, 'disabled' CSS class将添加到 il 元素。此外，onItemClick($event, option) 不应通过单击禁用的选项来触发，并且 itemClick 标志应设置为 true，这将防止下拉菜单关闭。这可以通过将点击函数重写为

来实现

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

下拉关闭由 onMouseclick($event) function 完成，它具有以下条件：

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

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

这可以通过使用 metadata reflection API 来完成。导入 Dropdown class 并获取其元数据：

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，例如：

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

就是这样:) 在 primeng@4.1.2

上测试

笨蛋：https://plnkr.co/edit/0Pqq565BPowABUauW7Y7

Answer 2

您还可以使用 ng-template、单击事件和自定义样式禁用 primeng 下拉列表中的任何项目，如下所示：

    cars: any[];
    selectedCar: string;

初始化 cars 对象数组，它本质上是 Interface SelectItem 的扩展，添加了属性 disabled: boolean

 ngOnInit(): void {
  this.cars = [];
  this.cars.push({label: 'Audi', value: 'Audi'});
  this.cars.push({label: 'BMW', value: 'BMW'});
  this.cars.push({label: 'Fiat', value: 'Fiat', disabled: true});
  this.cars.push({label: 'Ford', value: 'Ford'});
  this.cars.push({label: 'Honda', value: 'Honda', disabled: true});
  this.cars.push({label: 'Jaguar', value: 'Jaguar'});
  this.cars.push({label: 'Mercedes', value: 'Mercedes'});
  this.cars.push({label: 'Renault', value: 'Renault'});
  this.cars.push({label: 'VW', value: 'VW'});
  this.cars.push({label: 'Volvo', value: 'Volvo'});
 }

点击事件触发的方法

 onClick(disabled: boolean) {
         if(disabled) {
             event.stopPropagation();
         }
     }

使用 ng-template 自定义 Primeng 下拉菜单并添加 ng-style

 <p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}">
         <ng-template let-option pTemplate="item">
             <div>
                 <div (click)="onClick(option.disabled)" [ngStyle]="option.disabled? {'color': '#ccc', 'cursor': 'default'} : ''"> {{option.label}} </div>
             </div>
         </ng-template>
     </p-dropdown>

来源：ogousa（primeng 论坛）

PrimeNG 下拉菜单 - 禁用某些 SelectItems

PrimeNG dropdown - disable certain SelectItems

angular

primeng

primeng-dropdowns