如何正确使用 PrimeNG 的 Dropdown

Question

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

这是我的代码。

app.module.ts

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

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

我还使用命令安装了@angular/ @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

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

You need to add css to the angular.json file and a some dependencies to the package.json file as per PrimeNg Get started section.

这应该会让你朝着正确的方向前进