将列表框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

回答

相关问题