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>

在此控件中，<ng-template let-item pTemplate="item">部分在下拉列表中列出带有CSS图标的项目时按预期方式工作，但是当选择了某个项目时，它不会显示在控件中，而是在代码级显示被选中。

我正在使用以下自定义DTO；

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

我只遇到了{strong> <ng-template let-item pTemplate="selectedItem">模板的问题，因为我尝试item.value来获得对象以及直接item也是如此。两者都不适合我。

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

Answer 1

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

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

    label: string;
    value: string;

    cssClass: string;
}

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

PrimeNG Angular 8 p下拉selectedItem模板未呈现

1 个答案: