如何正确使用PrimeNG的下拉菜单

Question

我已经关注了this和this的问题，但是他们的问题与我的问题略有不同。实际上，第一个问题甚至没有适当的答案。尽管从primeng文档中正确地遵循了所有内容，但我还是收到此错误：

这是我的代码。

app.module.ts

//... 
import {DropdownModule} from 'primeng/dropdown';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ...,
    DropdownModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我还使用以下命令安装了@angular/cdk：npm install @angular/cdk --save

package.json

"dependencies": {
    ...
    "@angular/cdk": "^8.2.3",
    ...
    "primeicons": "^2.0.0",
    "primeng": "^8.1.1",
    ...
  },

我的 app.component.html 是：

  <p-dropdown [options]="cities1" [(ngModel)]="selectedCity1"></p-dropdown>

和我的 app.component.ts 是：

import { Component, OnInit } from '@angular/core';
import {SelectItem} from 'primeng/api';

interface City {
  name: string;
  code: string;
}

@Component({
  ...
})    
export class ContainerComponent implements OnInit {

  cities1: SelectItem[];
  selectedCity1: City;

  constructor() {
    this.cities1 = [
      {label:'Select City', value:null},
      {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
      {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
      ...
  ];
  }

  ngOnInit() {
  }
}

请纠正我。

PS：我也找到了stackblitz。但无法从中学到很多东西。

Answer 1

我创建了一个最小的stackbitz，其中带有primeNg下拉列表，因此您可以单独查看它。

您需要根据PrimeNg Get started部分将css添加到final HashMap文件中，并将一些依赖项添加到angular.json文件中。

那应该设置正确的方向