如何正确使用 PrimeNG 的 Dropdown答案

【问题标题】：How to use PrimeNG's Dropdown correctly如何正确使用 PrimeNG 的 Dropdown
【发布时间】：2020-03-06 07:37:35
【问题描述】：

我关注了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。但无法从中学到很多东西。

【问题讨论】：

标签： angular primeng primeng-dropdowns

【解决方案1】：

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

您需要根据 PrimeNg Get started 部分将 css 添加到 angular.json 文件和 package.json 文件的一些依赖项。

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

【讨论】：