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

Question

Below is my markup for the custom template design for the PrimeNG p-dropdown control

<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 in the code level the items is selected.

I'm using a custom DTO as below;

export class ListItemDto {
    text: string;
    text1: string;
    text2: string;
    value: string;
    cssClass: string;
}

I'm having issue only with the <ng-template let-item pTemplate="selectedItem"> template where as I have tried item.value to get the object as well as directly item also. Both are not working for me.

Any information would be helpfull. Thanks!

Answer 1

My colleague found the issue and it is just to have the label and value properties available in whatever the custom DTO we use as the collection. I only had value property.

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

    label: string;
    value: string;

    cssClass: string;
}

If the custom DTO contains the properties label and value properties along with other custom properties, the selectedItem template will start to work.