PrimeNG Angular 8 p-выпадающий выбранный шаблон элемента не рендеринга - PullRequest
Новая
       31

PrimeNG Angular 8 p-выпадающий выбранный шаблон элемента не рендеринга

0 голосов
/ 30 сентября 2019

Ниже приведена моя разметка для пользовательского дизайна шаблона для элемента управления p-раскрывающегося списка PrimeNG 

<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;
}

У меня проблема только с шаблоном <ng-template let-item pTemplate="selectedItem">, где, как я пытался item.value, чтобы получить объект, а также непосредственно item. Оба не работают для меня.

Любая информация будет полезна. Спасибо!

1 Ответ

0 голосов
/ 09 октября 2019

Мой коллега обнаружил проблему, и это просто для того, чтобы свойства label и value были доступны в любом пользовательском DTO, который мы используем в качестве коллекции. У меня было только свойство value. 

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

    label: string;
    value: string;

    cssClass: string;
}

Если пользовательский DTO содержит свойства label и value вместе с другими пользовательскими свойствами, шаблон selectedItem начнет работать.

...