【问题标题】:PrimeNG Angular 8 p-dropdown selectedItem template not renderingPrimeNG Angular 8 p-dropdown selectedItem模板未呈现
【发布时间】:2019-09-30 07:33:45
【问题描述】:

下面是我对 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>

在此控制中,&lt;ng-template let-item pTemplate="item"&gt;第987654322 @部分按预期工作,当下拉列表用CSS图标列出项目时,但在选择项目时,它不会在控件中显示,但在代码级别中选择了项目.

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

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

我只对&lt;ng-template let-item pTemplate="selectedItem"&gt; 模板有问题,因为我已经尝试item.value 以及直接item 来获取对象。两者都不适合我。

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

【问题讨论】:

  • --> 需要改成

标签: typescript primeng angular8 primeng-dropdowns selecteditemtemplate


【解决方案1】:

我的同事发现了问题,只是在我们用作集合的任何自定义 DTO 中都可以使用 labelvalue 属性。我只有value 属性。

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

    label: string;
    value: string;

    cssClass: string;
}

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

【讨论】:

  • 另一种解决方法是设置 optionLabel 属性。然后您可以通过 item.value.text1 访问模板中的自定义对象
  • 谢谢你,一整天都在碰我的头......他们有时真的会想出糟糕的解决方案
猜你喜欢
  • 2019-11-11
  • 1970-01-01
  • 1970-01-01
  • 2018-09-15
  • 2022-01-23
  • 1970-01-01
  • 2018-08-28
  • 2021-01-07
  • 2019-01-02
相关资源
最近更新 更多