リストボックスをSelectedItem ngPrimeをObservable CollectionにバインドするAngular2

Question

Angular2でngPrimeリストボックスを使用する際に問題があります。 firebaseからオブジェクトの配列を観測可能なものとしてダウンロードし、リストボックスに適切に表示しようとしています。

<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> 

問題は[] contactService.contactsはngPrime SelectItem関数でなければならないことであり、すべての項目が選択されたすべての理由です。 SelectItemオブジェクトは、{label： 'New York'、value： 'New York'}のようになります。myにはラベルがありません。 これを正しく行うにはどうすればいいですか？

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

} 

サービスは：

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

これは、あなたが始めるのに役立つかもしれません。コンポーネント内の変数contactsを宣言する必要があります。この変数はサービスから生成されます。テンプレートのHTMLをcontactsに登録して、データを取得することができます。ここに手順があります。

Changeからcalendar.component.htmlでこの行：

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

へ：

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

更新calendar.component.tsから：

header: any; 

〜：

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

注：あなたは最後に、あなたのコンポーネントクラスのコードを投稿してくださいすることができcalendar.service.ts

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