3
私はプリムンのドロップダウンディレクティブを使用して、カレンダーアプリに入る予定の予定タイプをユーザーが選択できるようにしています。ドロップダウンの下向きの矢印が表示され、クリックするとユーザーは通常どおりリストから項目を選択できますが、ドロップダウンに選択項目が表示される表示領域はありません。アイテムを選択してイベントをクリックし、次にドロップダウン矢印をクリックすると、選択された正しいアイテムが表示されることを確認できます。以下は、コンポーネントの私のTS、HTML、CSSファイルです。Primeng p-dropdownディレクティブで選択した値が表示されない
任命-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;
}