prime-ng Dropdown - 禁用某些SelectItems

Question

是否有一個選項可以禁用某些 prime-ng的下拉項（SelectItems）？

我注意到this discussion，有什麼改變？

Answer 1

這裏是我的解決辦法：

1） 延長原SelectItem's interface（reference）與disabled屬性，所以合併後的界面看起來像

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

，宣佈新的接口使用相同的可以這樣做名稱：

interface SelectItem { 
    disabled: boolean; 
} 

2） 根據加入disabled: option.disabled到li的ngClass指令，所以當選項設置爲禁用，‘禁用’CSS類將被添加到il元素

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

：component's template，修改模板的這一部分。 另外，onItemClick($event, option)不應該通過點擊禁用選項來觸發，並且itemClick標誌應該設置爲true，這將防止下拉式關閉。這可以通過重寫點擊功能來實現

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

下拉關閉通過onMouseclick($event) function，完成這具有以下條件：

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

因此，設置itemClick標誌真正爲禁用的選項將防止下拉收盤時點擊禁用的項目。可以使用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