I am facing an issue while trying to use the ngPrime listbox in Angular2. I have a scenario where I am fetching an array of objects from Firebase as an observable and attempting to display it correctly in the listbox.
<div *ngIf="addContactDialogVisible==true">
<h3>Pick Contact</h3>
<p-listbox [options]="contactService.contacts|async"
[style]="{'width':'250px','max-height':'250px'}">
<template let-c>
<div class="ui-helper-clearfix">
<avatar-component [key]="c.$key" [avatarSize]="50"
style="display:inline-block;margin:5px 0 0 5px"></avatar-component>
<div style="font-size:15px;float:right;margin:15px 10px 0 0">{{c.name}} {{c.surname}}</div>
</div>
</template>
<button pButton type="text" (click)="send()" icon="fa-check" label="Upload"></button>
</p-listbox>
The challenge here is that contactService.contacts needs to be in ngPrime SelectItem[] format, causing all items to be selected. Additionally, the SelectItem object has a specific structure like {label:'New York', value:'New York'}, which my data does not conform to. How can I resolve this issue?
component.ts:
import {Component, OnInit, ChangeDetectorRef} from '@angular/core';
import {CalendarService} from '../common/services/calendar.service';
import {SimplyCalendarModel} from './calendar.model';
import {ContactService} from '../common/services/contact.service';
import {ContactWithKey} from '../contacts/models/contact.model';
import {SelectItem} from '../../../assets/primeng/components/common/api';
@Component({
selector: 'calendar-component',
template: require('./calendar.component.html'),
})
export class CalendarComponent implements OnInit {
// con: SelectItem[];
header: any;
addContactDialogVisible: boolean = false;
pickContact: ContactWithKey;
constructor(
private cd: ChangeDetectorRef,
private contactService: ContactService) {
}
ngOnInit() {
this.contactService.getContacts();
this.header = {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
};
}
handleDayClick(e) {
this.addContactDialogVisible=true;
this.cd.detectChanges();
}
}
service:
public contacts: FirebaseListObservable<ContactWithKey[]>;
constructor(private af: AngularFire) {
}
getContacts() {
this.contacts = this.af.database.list('data/contacts');
this.af.database.list('data/contacts')
.subscribe(data => console.log(data));
}