PrimeNG Angular 8 p-dropdown selectedItem 模板未呈现

Question

下面是我为 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 还有。两者都不适合我。

任何信息都会有所帮助。谢谢！

Answer 1

我的同事发现了这个问题，它只是让 label 和 value 属性在我们用作集合的任何自定义 DTO 中可用。我只有 value 属性.

export class ListItemDto {
    text: string;
    text1: string;
    text2: string;

    label: string;
    value: string;

    cssClass: string;
}

如果自定义 DTO 包含属性 label 和 value 属性以及其他自定义属性，selectedItem 模板将开始工作。

PrimeNG Angular 8 p-dropdown selectedItem 模板未呈现

PrimeNG Angular 8 p-dropdown selectedItem template not rendering

typescript

primeng

angular8

primeng-dropdowns

selecteditemtemplate