將列表框SelectedItem ngPrime綁定到Observable集合Angular2

我在Angular2中使用ngPrime列表框有問題。我正在從firebase下載對象數組作爲可觀察的，並試圖在列表框中正確顯示它;將列表框SelectedItem ngPrime綁定到Observable集合Angular2

<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對象是這樣的：{標籤：'紐約'，價值：'紐約'}，我沒有標籤。如何正確執行此項工作？

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

來源

2016-09-24 snajperek130

能否請您發表您的組件類的代碼。 – Brad

我編輯了我的帖子，但正如你所看到的，它並不多。 – snajperek130

'contactService.contacts'是一個Observable嗎？你可以發佈你的'ContactService'代碼嗎？ – Brad

這可能會幫助您開始。您需要在組件中聲明您的contacts變量，您將從服務中填充該變量。然後，您的模板HTML可以訂閱contacts併爲您提取數據。以下是步驟。

改變這一行中calendar.component.html從：從

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

更新calendar.component.ts：

header: any;

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

到到：

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

注：你將不得不進口FirebaseListObservable到calendar.component.ts

頂部最後更新calendar.service.ts

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

來源

2016-10-03 05:45:14 Caleb

將列表框SelectedItem ngPrime綁定到Observable集合Angular2

回答

相關問題