Question

我使用自定义模板创建了一个样本primeng下拉列表。现在我想从下拉列表中访问特定元素。就像我将在css的特定列表元素上做一些样式。下拉每个项目类是ui-dropdown-item。所以我尝试添加带有条件的包装div和带有.ui-dropdown-item的嵌套css，这不起作用。

＆＃13;

import {SelectItem} from 'primeng/api';

export class MyModel {

    cars: SelectItem[]; //extended SelectItem Interface to add disabled property

    selectedCar: string;

    constructor() {
        this.cars = [
            {label: 'Audi', value: 'Audi',disabled:true},
            {label: 'BMW', value: 'BMW'},
            {label: 'Fiat', value: 'Fiat'},
            {label: 'Ford', value: 'Ford'},
            {label: 'Honda', value: 'Honda'},
            {label: 'Jaguar', value: 'Jaguar'},
            {label: 'Mercedes', value: 'Mercedes'},
            {label: 'Renault', value: 'Renault'},
            {label: 'VW', value: 'VW'},
            {label: 'Volvo', value: 'Volvo'},
        ];
    }
}

＆＃13;

.disabled{
  .ui-dropdown-item{
    color: #aaa,
    cursor: default,
    pointer-event: none
  }
}

＆＃13;

<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}">
     <ng-template let-item pTemplate="selectedItem"> 
        <img src="assets/showcase/images/demo/car/{{item.label}}.png" /> 
        <span>{{item.label}}</span>
    </ng-template> 
    <ng-template let-car pTemplate="item"> 
        <div [ngClass]="item.disabled === true ? 'disabled' : '' ">
        <img src="assets/showcase/images/demo/car/{{car.label}}.png" /> 
        <div>{{car.label}}</div> </div>
    </ng-template>
</p-dropdown>

＆＃13;

Answer 1

你的想法很好，但你犯了一些错误。

<强> CSS

删除嵌套类ui-dropdown-item
CSS属性应由; 代替，

所以

.disabled{
  .ui-dropdown-item{
    color: #aaa,
    cursor: default,
    pointer-event: none
  }
}

成为

.disabled{
    color: #aaa;
    cursor: default;
    pointer-event: none;
}

<强> HTML

disabled属性应该应用于car而不是item

所以

<div [ngClass]="item.disabled === true ? 'disabled' : '' ">

变为

<div [ngClass]="car.disabled === true ? 'disabled' : '' ">

见工作Plunker

Primeng自定义模板访问特定项目

1 个答案: