Angular 自定义内容下拉列表在启动时不起作用?
我正在实现一个自定义内容下拉列表。它不能正常工作。它不设置Angular 自定义内容下拉列表在启动时不起作用?,angular,primeng,primeng-dropdowns,Angular,Primeng,Primeng Dropdowns,我正在实现一个自定义内容下拉列表。它不能正常工作。它不设置selectedTestType值,并在OnChangeTestType中给出undefined值 <p-dropdown name="classTestTypeCombobox" [options]="TestTypes" [(ngModel)]="selectedTestType" [style]="{'width':'150px'}" filter="filter"
selectedTestType
值,并在OnChangeTestType
中给出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>
将optionLabel与要在下拉列表中显示的字段名称一起使用。例如,如果要使用classificationCode
<p-dropdown name="classTestTypeCombobox"
[options]="TestTypes" [(ngModel)]="selectedTestType"
[style]="{'width':'150px'}" filter="filter"
[disabled]="this.isProdCodeDisabled"
optionLabel="classificationCode"
</p-dropdown>
通过查看priming 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>
{{group?.value.Code}
{{group?.value.Description}}
这就是我在打开p-dialog时获得自定义下拉列表以显示所选值的方式。必须添加上面@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>
您可以包括“TestType”字段声明以及如何向其中插入值吗?这将不起作用,因为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>
export class UserType {
userRoleID : number
usertypeID : number
usertypeName : string
}