0

下面是我对 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 in the code level the items is selected.

我正在使用如下的自定义 DTO；

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

我只对<ng-template let-item pTemplate="selectedItem">模板有问题，因为我试图item.value直接获取对象item。两者都不适合我。

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

4

1 回答 1

2

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

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

    label: string;
    value: string;

    cssClass: string;
}

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

于 2019-10-09T06:49:17.473 回答