将列表框 SelectedItem Primeng 绑定到 Observablecollection Angular 2答案

【问题标题】：Binding a listbox SelectedItem ngPrime to an Observable Collection Angular2将列表框 SelectedItem Primeng 绑定到 Observablecollection Angular 2
【发布时间】：2017-02-02 09:35:03
【问题描述】：

我在 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'}，我没有标签。如何正确地完成这项工作？

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

【问题讨论】：

能否请您发布您的组件类代码。
我已经编辑了我的帖子，但正如您所见，它并不多。
contactService.contacts 是 Observable 吗？能否请您发布您的ContactService 代码。
好的，现在我瘦了，我必须将我的 ContactWithKey 模型更改为这样的模型 {label:'',value:''}，但我不知道该怎么做。

标签： angular typescript firebase-realtime-database primeng

【解决方案1】：

这可能会帮助您入门。您需要在组件中声明您的 contacts 变量，您将从您的服务中填充该变量。然后您的模板 HTML 可以订阅 contacts 并为您获取数据。步骤如下。

将 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[]>;

注意：您必须将FirebaseListObservable 导入到calendar.component.ts 的顶部

终于更新calendar.service.ts

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

【讨论】：