PrimeNG 下拉菜单 - 禁用某些 SelectItems

Question

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

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

Answer 1

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

    cars: any[];
    selectedCar: string;

1. 初始化对象的汽车数组，该对象本质上是接口 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'});
    }
   

2. 点击事件触发的方法

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

3. 使用 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 论坛）

Answer 2

这是我的解决方法：

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 will be added to the il element. 此外，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 类并获取其元数据：

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上测试

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