Блог

Я пытаюсь интегрировать PrimeNG multi select, поскольку хочу отключить некоторые параметры. Я использовал disabled свойство, как указано в документе PrimeNG, но оно не работает.

Вот фрагмент кода и значения параметров:

 <p-multiSelect [filter]="true" [virtualScroll]="true" [resetFilterOnHide]="true" optionLabel="label" [(ngModel)]="rowData[col.dataField]"
                                            name="{{col.dataField}}_{{topIndex}}_{{rowIndex}}_{{colIndex}}" [options]="calculationVariables"
                                            defaultLabel="Please Select" autoWidth="false" [style]="{'width':'100%'}" styleClass="priliminary-dorpdown-style {{rowData[col.dataField]?.length == 0 ?  'invalid-control': null}}">
                                            <ng-template let-item pTemplate="selectedItem">
                                                <span class="multicheck-label">{{item.label}}</span>
                                            </ng-template>
                                            <ng-template let-variable pTemplate="item">
                                                <div pTooltip="{{variable.label}}" tooltipPosition="right">
                                                    <span class="multicheck-label">{{variable.label}}</span>
                                                </div>
                                            </ng-template>
                                        </p-multiSelect> 
  

Вы также можете отключить любой элемент в primeng multiSelect, используя ng-template, событие щелчка и пользовательский стиль, как показано ниже:

Метод, который запускается при событии щелчка

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

Настройка Primeng MultiSelect с использованием ng-шаблона и добавление ng-стиля

 <p-multiSelect optionLabel="label"
               name="{{col.dataField}}_{{topIndex}}_{{rowIndex}}_{{colIndex}}"
               defaultLabel="Please Select"
               autoWidth="false"
               [filter]="true"
               [virtualScroll]="true"
               [resetFilterOnHide]="true"
               [(ngModel)]="rowData[col.dataField]"
               [options]="calculationVariables"
               [style]="{'width':'100%'}"
               styleClass="priliminary-dorpdown-style {{rowData[col.dataField]?.length == 0 ?  'invalid-control': null}}">

    <ng-template let-option pTemplate="item">
            <div class="multicheck-label"
                 (click)="onClick(item.disabled)"
                 [ngStyle]="item.disabled? {'color': '#ccc', 'cursor': 'default'} : ''"> {{item.label}}
            </div>
    </ng-template>

    <ng-template let-variable pTemplate="item">
        <div pTooltip="{{variable.label}}" tooltipPosition="right">
            <span class="multicheck-label">{{variable.label}}</span>
        </div>
    </ng-template>
    
</p-multiSelect>
  

В primeng 11 появилось новое свойство «optionDisabled«.

пример использования:

 <p-multiSelect [options]="cities" [(ngModel)]="selectedCities" optionLabel="name" optionDisabled="inactive"></p-multiSelect>
  

экспортировать класс MultiSelectDemo {

 cities: City[];

selectedCities: City[];

constructor() {
    this.cities = [
        {name: 'New York', code: 'NY', inactive: false},
        {name: 'Rome', code: 'RM', inactive: true},
        {name: 'London', code: 'LDN', inactive: false},
        {name: 'Istanbul', code: 'IST', inactive: true},
        {name: 'Paris', code: 'PRS', inactive: false}
    ];
}
  

}

С помощью свойства optionDisabled можно запретить выбор определенных параметров.