Как правильно использовать DropName от PrimeNG - PullRequest
Новая
       32

Как правильно использовать DropName от PrimeNG

0 голосов
/ 10 ноября 2019

Я следил за этим и этим вопросом, но их проблема немного отличается от моей. На самом деле первый вопрос даже не имеет правильного ответа. Несмотря на то, что все правильно из основной документации, я получаю эту ошибку:

screenshot

А вот мой код.

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 также. Но не могу многому научиться из этого.

1 Ответ

1 голос
/ 10 ноября 2019

Я создал минимальный stackbitz с выпадающим списком primeNg, чтобы вы могли видеть его изолированно.

Вам необходимо добавить css в файл angular.json и некоторые зависимости в package.json файл согласно PrimeNg Начало работы раздел.

Это должно установить вас в правильном направлении

...