Question

是否可以选择停用某些的prime-ng下拉项目（SelectItems）？

我注意到this discussion，是否有变化？

Answer 1

这是我的解决方法：

1）使用std::vector属性扩展原始SelectItem's interface（reference），因此合并的界面将如下所示

disabled

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

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

2）根据{{1}} component's template修改模板的这一部分：

interface SelectItem {
  disabled: boolean;
}

将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>的{{1}}指令，因此当选项设置为已停用时，＆＃39;已禁用＆＃39; CSS类将添加到disabled: option.disabled元素中。此外，不应通过单击禁用的选项触发li，并且ngClass标志应设置为true，这将阻止下拉关闭。这可以通过将点击功能重写为

来实现

il

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

onItemClick($event, option)

因此，对于禁用的选项设置itemClick标志为true将阻止在单击禁用的项目时关闭下拉列表。

这可以通过使用metadata reflection API来完成。导入(click)="!option.disabled && onItemClick($event, option) || itemClick = true"类并获取其元数据：

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

3）为禁用的项添加所需的CSS，例如：

itemClick

就是这样:) 在primeng@4.1.2上测试

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

Answer 2

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

    cars: any[];
    selectedCar: string;

初始化对象的cars数组，该对象是Interface 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'});
}

点击事件触发的方法

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

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

prime-ng下拉列表 - 禁用某些SelectItems

2 个答案: