自定义内容下拉菜单在 PrimeNG 中不起作用？答案

【问题标题】：Custom content dropdown not working in PrimeNG?自定义内容下拉菜单在 PrimeNG 中不起作用？
【发布时间】：2018-04-19 02:22:15
【问题描述】：

我正在实施自定义内容下拉菜单。不能正常工作。它没有设置selectedTestType 值，而是在onChangeTestTypes 中给出undefined 值。

<p-dropdown name="classTestTypeCombobox"
            [options]="TestTypes" [(ngModel)]="selectedTestType"
            [style]="{'width':'150px'}" filter="filter"
            [disabled]="this.isProdCodeDisabled"
            appendTo="body"
            required
            #classTestTypeCombobox="ngModel"
            (ngModelChange)="onChangeTestTypes($event)">
    <ng-template let-TestType pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
            <div>{{TestType.descLong}}</div>
        </div>
    </ng-template>
</p-dropdown>

TestTypes是一个类对象数组，它有以下成员。

id: number;
classificationCode: string;
descLong: string;
classificationParent: string;
codeType: number;

onChangeTestTypes(TestType) {
    this.selectedTestTypeDesc = this.TestTypes.filter(x => x.priceCode == TestType)[0].descLong;
    this.price.Type = this.TestTypes.filter(x => x.priceCode == TestType)[0].Type;
}

【问题讨论】：

能否包含“TestType”字段声明以及如何将值插入其中？

标签： angular primeng primeng-dropdowns

【解决方案1】：

这就是我在 p 对话框打开时获得自定义下拉菜单以显示所选值的方式。必须添加上面@freedeveloper 提到的 optionLabel 属性。

<p-dropdown appendTo="body" id="usertypeID" [options]="userTypesList" [(ngModel)]="user.userType" optionLabel="usertypeName">
<ng-template let-ut pTemplate="item">
    <div class="ui-helper-clearfix" style="position: relative;height:25px;">
      <div style="color:black;">{{ ut.value.usertypeName }}</div>
    </div>
</ng-template>

下面是我的模型（它嵌套在 User 类下）：

export class UserType {
    userRoleID : number
    usertypeID : number
    usertypeName : string
}

【讨论】：

【解决方案2】：

通过查看 PrimeNG SelectItem，我发现该值既是标签又是对象，因此在原始问题中，答案看起来像 {{TestType.value.descLong}}。我的完整解决方案是这样的：

<ng-template let-group pTemplate="item">
    <div style="width: 100%; display: flex;">
        <span style="width:30px;">{{group?.value.Code}}</span>
        <span style="width:60px;">{{group?.value.Description}}</span>
    </div>
</ng-template>

【讨论】：

你是我的英雄！这并不明显。甚至 PrimeNGs 网站上的示例也没有说明这一点（至少对我而言）。

【解决方案3】：

将 optionLabel 与要在下拉列表中显示的字段的名称一起使用。例如，如果你想使用分类代码

 <p-dropdown name="classTestTypeCombobox"
            [options]="TestTypes" [(ngModel)]="selectedTestType"
            [style]="{'width':'150px'}" filter="filter"
            [disabled]="this.isProdCodeDisabled"
            optionLabel="classificationCode"
</p-dropdown>

注意 optionLabel 不需要 [] 并且赋值是简单的自定义对象字段的名称。

【讨论】：

这行不通，因为 optionLabel 将只显示一个属性，而这里我们正在尝试显示自定义内容。我也有同样的问题。