自定义内容下拉菜单在 PrimeNG 中不起作用?
Custom content dropdown not working in PrimeNG?
我正在实施自定义内容下拉菜单。工作不正常。它不设置 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
是一个 class 对象的数组,它有以下成员。
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;
}
将 optionLabel 与要在下拉列表中显示的字段名称一起使用。例如,如果你想使用 classificationCode
<p-dropdown name="classTestTypeCombobox"
[options]="TestTypes" [(ngModel)]="selectedTestType"
[style]="{'width':'150px'}" filter="filter"
[disabled]="this.isProdCodeDisabled"
optionLabel="classificationCode"
</p-dropdown>
观察到 optionLabel 不需要 [],分配的值也很简单,即自定义对象字段的名称。
通过查看 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>
这就是我如何在 p-dialog 打开时获得自定义下拉菜单以显示所选值的方法。必须添加上面@freedeloper 提到的 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 class 下):
export class UserType {
userRoleID : number
usertypeID : number
usertypeName : string
}
如果您的商品是 {name:'test'}
:
,请使用 value.name
<ng-template let-country pTemplate="item">
<div class="country-item">
<div>{{country.value.name}}</div>
</div>
</ng-template>
我正在实施自定义内容下拉菜单。工作不正常。它不设置 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
是一个 class 对象的数组,它有以下成员。
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;
}
将 optionLabel 与要在下拉列表中显示的字段名称一起使用。例如,如果你想使用 classificationCode
<p-dropdown name="classTestTypeCombobox"
[options]="TestTypes" [(ngModel)]="selectedTestType"
[style]="{'width':'150px'}" filter="filter"
[disabled]="this.isProdCodeDisabled"
optionLabel="classificationCode"
</p-dropdown>
观察到 optionLabel 不需要 [],分配的值也很简单,即自定义对象字段的名称。
通过查看 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>
这就是我如何在 p-dialog 打开时获得自定义下拉菜单以显示所选值的方法。必须添加上面@freedeloper 提到的 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 class 下):
export class UserType {
userRoleID : number
usertypeID : number
usertypeName : string
}
如果您的商品是 {name:'test'}
:
<ng-template let-country pTemplate="item">
<div class="country-item">
<div>{{country.value.name}}</div>
</div>
</ng-template>