7

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

我注意到这个讨论，有什么改变吗？

4

2 回答 2

13

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

    cars: any[];
    selectedCar: string;

  1. 初始化对象的汽车数组，该对象本质上是接口 SelectItem 的扩展，并添加了禁用的属性：布尔值

     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论坛）

于 2018-03-22T13:24:33.207 回答
8

这是我的解决方法：

1）用属性扩展原来SelectItem的接口（参考disabled） ，所以合并的接口看起来像

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

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

interface SelectItem {
  disabled: boolean;
}

2）基于p-dropdown 组件的模板，修改这部分模板：

<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>

通过添加disabled: option.disabled到li“ngClass指令”，因此当将选项设置为禁用时，将添加“禁用” CSS类il。此外，onItemClick($event, option)不应通过单击禁用的选项来触发，并且itemClick标志应设置为 true，这将防止下拉菜单关闭。这可以通过将 click 函数重写为

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

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

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

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

这可以通过使用元数据反射 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

于 2017-07-27T23:32:52.040 回答