Question

我在Angular2中使用ngPrime列表框时遇到问题。我正在从firebase下载对象数组作为observable并尝试在列表框中正确显示它;

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

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

将列表框SelectedItem ngPrime绑定到Observable Collection Angular2

1 个答案: