Liaison d'une zone de liste SelectedItem ngPrime à une collection observable Angular2

Question

J'ai un problème lors de l'utilisation de la zone de liste ngPrime dans Angular2. Je télécharge un tableau d'objets de Firebase comme observable et essaie de l'afficher correctement dans la 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> 

Le problème est que contactService.contacts devrait être dans ngPrime SelectItem [] et qui est la raison pour laquelle tous les éléments tous sélectionnés. De plus, l'objet SelectItem ressemble à ceci: {label: 'New York', valeur: 'New York'}, mon n'a pas d'étiquette. Comment faire pour que ça fonctionne correctement?

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

} 

services:

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

Answer 1

Cela pourrait vous aider à démarrer. Vous devrez déclarer votre variable contacts dans le composant, que vous remplirez à partir de votre service. Et puis votre modèle HTML peut alors s'abonner à contacts et récupérer les données pour vous. Voici les étapes.

Modifier cette ligne dans calendar.component.html de:

<p-listbox [options]="contactService.contacts|async" 
    [style]="{'width':'250px','max-height':'250px'}"> 

à:

<p-listbox [options]="contacts | async" 
    [style]="{'width':'250px','max-height':'250px'}"> 

Mise à jour calendar.component.ts de:

header: any; 

à:

header: any; 
contacts: FirebaseListObservable<ContactWithKey[]>; 

REMARQUE: Vous devrez importer FirebaseListObservable en haut de calendar.component.ts

Enfin la mise à jour calendar.service.ts

getContacts() { 
    return this.af.database.list('data/contacts'); 
}