Primeng p-dropdown 指令不显示所选值

Posted 2023-03-05

【中文标题】Primeng p-dropdown 指令不显示所选值

【英文标题】：Primeng p-dropdown directive not displaying selected value

【发布时间】：2016-11-01 18:54:24

【问题描述】：

我正在使用 primeng 的下拉指令来允许用户为进入日历应用程序的事件选择约会类型。下拉菜单的向下箭头显示，当点击它时，用户可以像往常一样从列表中选择项目，但没有显示区域，下拉菜单应显示所选项目。我可以验证选择一个项目是否有效，然后单击一个事件，然后单击下拉箭头将显示选择的正确项目。下面是我的组件的 ts、html 和 css 文件。

约会-detail.component.ts：

import  Input, Component, Output, EventEmitter  from '@angular/core';
import  Event  from '../../shared'
import  Calendar, Button, Dropdown, SelectItem  from 'primeng/primeng'

@Component(
  moduleId: module.id,
  selector: 'appointment-detail',
  templateUrl: 'appointment-detail.component.html',
  styleUrls: ['appointment-detail.component.css'],
  directives: [Calendar, Button, Dropdown]
)
export class AppointmentDetailComponent 
  @Input() event;
  @Output() submitDetails: EventEmitter<any> = new EventEmitter();
  appointmentTypes: SelectItem[];

  constructor() 
    this.event = new Event();
    this.appointmentTypes = [];
    this.appointmentTypes.push(label: 'Select type:', value: '')
    this.appointmentTypes.push(label: 'Meeting', value: 'Meeting')
    this.appointmentTypes.push(label: 'Vacation', value: 'Vacation')
    this.appointmentTypes.push(label: 'Other', value: 'Other')
  

  saveEvent() 
    this.submitDetails.emit(action: 'save', event: this.event);
  

  deleteEvent() 
    this.submitDetails.emit(action: 'delete', event: this.event);
  

约会-detail.component.html:

<div class="modal-content" *ngIf="!event">Loading...</div>
<div class="modal-content" *ngIf="event">
  <h2 class="header"> Appointment Details </h2>
  <div class="ui-grid ui-grid-responsive ui-fluid">
    <div class="ui-grid-row">
      <div class="ui-grid-col-2"></div>
      <div class="ui-grid-col-2"><label for="vin">Title</label></div>
      <input class="ui-grid-col-6" pInputText id="title" [(ngModel)]="event.title" />
    </div>
    <div class="ui-grid-row">
      <div class="ui-grid-col-2"></div>
      <div class="ui-grid-col-2"><label for="start">Start</label></div>
      <div class="ui-grid-col-6">
        <p-calendar id="start" dateFormat="yy-mm-dd" [(ngModel)]="event.start"></p-calendar>
      </div>
    </div>
    <div class="ui-grid-row">
      <div class="ui-grid-col-2"></div>
      <div class="ui-grid-col-2"><label for="end">End</label></div>
      <div class="ui-grid-col-6">
        <p-calendar id="end" dateFormat="yy-mm-dd" [(ngModel)]="event.end" placeholder="Optional"></p-calendar>
      </div>
    </div>
    <div class="ui-grid-row">
      <div class="ui-grid-col-2"></div>
      <div class="ui-grid-col-2"><label for="location">Location</label></div>
      <input class="ui-grid-col-6" id="location" [(ngModel)]="event.location" />
    </div>
    <div class="ui-grid-row">
      <div class="ui-grid-col-2"></div>
      <div class="ui-grid-col-2"><label for="type">Type</label></div>
      <p-dropdown class="ui-grid-col-6" id="type" [options]="appointmentTypes" [(ngModel)]="event.type"></p-dropdown>
    </div>
    <div class="ui-grid-row">
      <div class="ui-grid-col-2"></div>
      <div class="ui-grid-col-2"><label for="details">Details</label></div>
      <input class="ui-grid-col-6" pInputText id="details" [(ngModel)]="event.details" />
    </div>
  </div>
  <footer>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
      <span class="footer-padding"></span>
      <button class="footer-button" type="button" pButton icon="fa-check" (click)="saveEvent()" label="Save"></button>
      <button class="footer-button" type="button" pButton icon="fa-close" (click)="deleteEvent()" label="Delete"></button>
      <span class="footer-padding"></span>
    </div>
  </footer>
</div>

约会-detail.component.css：

.header 
    text-align: center;
    margin: 15px;


.ui-grid-row 
    margin-bottom: 4px;
    margin-top: 4px;


.ui-dialog-buttonpane 
    padding: 3px;
    display: flex;


.footer-padding 
    flex: 4;


.footer-button 
    flex: 2;

【参考方案1】：

将appendTo="body" 添加到您的下拉列表中

【参考方案2】：

您的错误在这一行：

this.appointmentTypes.push(label: 'Select type:', value: '')

如果要显示下拉选择的值，默认选项的值必须为空：

this.appointmentTypes.push(label: 'Select type:', value: null)