angular - primeng下拉列表不显示

Question

我试图显示 primeng 下拉列表，但该列表根本不显示。我正在使用 Angular 4.0.2 和 primeng 4.0.0-rc.3。我确实看到了很多报告的问题，并尝试了不同的解决方案，但仍然没有看到下拉列表。

html页面

<p-dropdown [options]="archivingGroups"[(ngModel)]="selectedArchivingGroup"  ngDefaultControl ></p-dropdown>

组件代码:

import {Component, OnInit} from '@angular/core';
import {FixingTimeService} from './service/fixing-time.service';
import {SelectItem} from 'primeng/primeng';
import {FixingTime} from './service/fixing-time';

@Component({
    selector: 'app-fixing-time',
    templateUrl: './fixing-time.component.html',
    styleUrls: ['./fixing-time.component.css'],
})

export class FixingTimeComponent implements OnInit {

    archivingGroups: SelectItem[] = [];
    selectedArchivingGroup: string;

    private _fixingTimes: FixingTime[];

    constructor(private _fixingService: FixingTimeService) {
        this._fixingService.getAll().subscribe(
            fixingTimes => {
                this._fixingTimes = fixingTimes;
                this.setCurrencyPair('USD/TH1');
            },
            error => console.log(error)
        );
    }

    ngOnInit() {
        // this._fixingService.getAll().subscribe(
        //     fixingTimes => {
        //         this._fixingTimes = fixingTimes;
        //         this.setCurrencyPair('USD/TH1');
        //     },
        //     error => console.log(error)
        // );
    }

    onchange() {
        console.log('FixingTime onChange()');
    }

    private setCurrencyPair(currencyPair: string): void {
        this.archivingGroups.push({label: 'select archiving group', value: null});
        for (let item of this._fixingTimes) {
            if (item.contract === currencyPair) {
                this.archivingGroups.push({label: item.archiving_group, value: item});
            }
        }
    }
}

这是我的 package.json

{
  "name": "sales-desktop",
  "version": "0.0.93-SNAPSHOT.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "build": "ng build",
    "start dev-stubbed": "ng serve --env=dev-stubbed",
    "start dev-localhost": "ng serve --env=dev-localhost",
    "lint": "ng lint",
    "test": "ng test",
    "test with coverage": "ng test --code-coverage",
    "coverage": "rimraf coverage && ng test --browsers PhantomJS --code-coverage true --singleRun true",
    "coverage chrome": "rimraf coverage && ng test --browsers Chrome --code-coverage true --singleRun true",
    "continuous coverage": "rimraf coverage && ng test --browsers PhantomJS --code-coverage true",
    "test chrome": "ng test --browsers Chrome",
    "test phantomjs once": "ng test --browsers PhantomJS --singleRun true",
    "pree2e": "webdriver-manager --proxy http://gblproxy.lb.service.anz:80 update --ignore_ssl=true",
    "e2e": "ng e2e",
    "protractor elementExplorer": "protractor --elementExplorer",
    "compile dynamic": "ng build --env=dynamic",
    "compile": "ng build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.2",
    "@angular/common": "^4.0.2",
    "@angular/compiler": "^4.0.2",
    "@angular/compiler-cli": "^4.0.2",
    "@angular/core": "^4.0.2",
    "@angular/forms": "^4.0.2",
    "@angular/http": "^4.0.2",
    "@angular/platform-browser": "^4.0.2",
    "@angular/platform-browser-dynamic": "^4.0.2",
    "@angular/router": "^4.0.2",
    "@types/jasmine": "^2.5.47",
    "@types/node": "^6.0.70",
    "angular2-moment": "^1.2.0",
    "chart.js": "^2.5.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "fullcalendar": "^3.3.1",
    "intl": "^1.2.5",
    "jquery": "^3.1.1",
    "js-joda": "^1.5.1",
    "karma": "^1.6.0",
    "karma-coverage-istanbul-reporter": "^1.2.0",
    "moment": "^2.17.1",
    "nanoscroller": "^0.8.7",
    "primeng": "^4.0.0-rc.3",
    "quill": "^1.2.4",
    "rxjs": "^5.3.0",
    "ts-node": "^2.1.2",
    "typescript": "^2.3.0",
    "web-animations-js": "^2.2.4",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0-rc.2",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "^2.5.38",
    "@types/node": "^6.0.60",
    "codelyzer": "^2.1.1",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "^4.0.0",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "^1.0.1",
    "karma-fixture": "^0.2.6",
    "karma-html2js-preprocessor": "^1.1.0",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-json-fixtures-preprocessor": "^0.0.6",
    "karma-phantomjs-launcher": "^1.0.4",
    "protractor": "^5.1.0",
    "tslint": "^4.5.1",
    "typescript": "^2.1.0",
    "typescript-collections": "^1.2.3"
  }
}

Answer 1

您导入了下拉模块吗？

import { DropdownModule } from 'primeng/primeng';