PrimeNG Angular 8 p-dropdown selectedItem 模板未呈现
PrimeNG Angular 8 p-dropdown selectedItem template not rendering
下面是我为 PrimeNG p-dropdown 控件自定义模板设计的标记
<p-dropdown [options]="list" [(ngModel)]="selectedListItem" (onChange)="selectionChanged($event)">
<ng-template let-item pTemplate="selectedItem">
<div class="custom-template-div">
<div class="pull-left location-icon {{item.value.cssClass}}"></div>
<div class="header-line pull-left"><b>{{item.value.text1}}</b></div>
<div class="clearfix"></div>
<div class="detail-line"><i>{{item.value.text2}}</i></div>
</div>
</ng-template>
<ng-template let-item pTemplate="item">
<div class="custom-template-div">
<div class="pull-left location-icon {{item.cssClass}}"></div>
<div class="header-line pull-left"><b>{{item.text1}}</b></div>
<div class="clearfix"></div>
<div class="detail-line"><i>{{item.text2}}</i></div>
</div>
</ng-template>
</p-dropdown>
In this control the <ng-template let-item pTemplate="item">
section is working as expected when the dropdown is listing the items with CSS icons, but when an item been selected, it is not showing in the control, but在代码级别中,项目被选中。
我正在使用自定义 DTO,如下所示;
export class ListItemDto {
text: string;
text1: string;
text2: string;
value: string;
cssClass: string;
}
我只有 <ng-template let-item pTemplate="selectedItem">
模板有问题,因为我已经尝试 item.value
获取对象以及直接 item
还有。两者都不适合我。
任何信息都会有所帮助。谢谢!
我的同事发现了这个问题,它只是让 label
和 value
属性在我们用作集合的任何自定义 DTO 中可用。我只有 value
属性.
export class ListItemDto {
text: string;
text1: string;
text2: string;
label: string;
value: string;
cssClass: string;
}
如果自定义 DTO 包含属性 label
和 value
属性以及其他自定义属性,selectedItem
模板将开始工作。
下面是我为 PrimeNG p-dropdown 控件自定义模板设计的标记
<p-dropdown [options]="list" [(ngModel)]="selectedListItem" (onChange)="selectionChanged($event)">
<ng-template let-item pTemplate="selectedItem">
<div class="custom-template-div">
<div class="pull-left location-icon {{item.value.cssClass}}"></div>
<div class="header-line pull-left"><b>{{item.value.text1}}</b></div>
<div class="clearfix"></div>
<div class="detail-line"><i>{{item.value.text2}}</i></div>
</div>
</ng-template>
<ng-template let-item pTemplate="item">
<div class="custom-template-div">
<div class="pull-left location-icon {{item.cssClass}}"></div>
<div class="header-line pull-left"><b>{{item.text1}}</b></div>
<div class="clearfix"></div>
<div class="detail-line"><i>{{item.text2}}</i></div>
</div>
</ng-template>
</p-dropdown>
In this control the <ng-template let-item pTemplate="item">
section is working as expected when the dropdown is listing the items with CSS icons, but when an item been selected, it is not showing in the control, but在代码级别中,项目被选中。
我正在使用自定义 DTO,如下所示;
export class ListItemDto {
text: string;
text1: string;
text2: string;
value: string;
cssClass: string;
}
我只有 <ng-template let-item pTemplate="selectedItem">
模板有问题,因为我已经尝试 item.value
获取对象以及直接 item
还有。两者都不适合我。
任何信息都会有所帮助。谢谢!
我的同事发现了这个问题,它只是让 label
和 value
属性在我们用作集合的任何自定义 DTO 中可用。我只有 value
属性.
export class ListItemDto {
text: string;
text1: string;
text2: string;
label: string;
value: string;
cssClass: string;
}
如果自定义 DTO 包含属性 label
和 value
属性以及其他自定义属性,selectedItem
模板将开始工作。