prime-ngドロップダウン - 特定のSelectItemsを無効にする

Question

無効にするオプションはありますかプライムngのドロップダウンアイテム（SelectItems）のいくつかはですか？

通知ありthis discussion、何か変更されていますか？ここ

Answer 1

は私の回避策です：

1） ので、マージされたインタフェースが

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

のようになります。これは同じと宣言する新しいインタフェースによって行うことができる、disabledプロパティで（reference）元SelectItem's interfaceを拡張名称：

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> 

disabled: option.disabledliに追加することによって、「オプションが無効に設定されているときに、sでngClassディレクティブを、 『無効』 CSSクラスがil要素に追加されます。 また、無効なオプションをクリックしてonItemClick($event, option)を起動してはならず、itemClickフラグをtrueに設定する必要があります。これにより、ドロップダウンができなくなります。 、

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

ので無効なオプションのための真のitemClickフラグを設定する際にドロップダウン閉鎖を防ぐことができます。これは、ドロップダウン・クロージングは​​、条件を、以下のいonMouseclick($event) function、によって行われ

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

にクリック機能を書き換えることによって達成することができます無効な項目をクリックします。

metadata reflection APIを使用してこれを行うことができます。インポートDropdownクラスとそのメタデータを取得する：それは

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

です:) primeng@4.1.2

でテスト：たとえば無効な項目について

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

プランナー：https://plnkr.co/edit/0Pqq565BPowABUauW7Y7