Problèmes d'interface utilisateur de composant Primeng

Question

Je travaille sur les composants PrimeNG. Mais j'ai des problèmes avec l'interface utilisateur affichée sur le navigateur Web.

À l'heure actuelle, je souhaite afficher une liste déroulante statique. J'ai pris la référence de PrimeNG. Le code suivant est pour afficher ce composant.

fichier HTML

<h3 class="first">Single</h3> 
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City"></p-dropdown> 
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p> 

Fichier Component

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 

    cities: SelectItem[]; 

    selectedCity: string; 
    constructor() { 
    this.cities = []; 
    this.cities.push({ label: 'Select City', value: null }); 
    this.cities.push({ label: 'New York', value: { id: 1, name: 'New York', code: 'NY' } }); 
    this.cities.push({ label: 'Rome', value: { id: 2, name: 'Rome', code: 'RM' } }); 
    this.cities.push({ label: 'London', value: { id: 3, name: 'London', code: 'LDN' } }); 
    this.cities.push({ label: 'Istanbul', value: { id: 4, name: 'Istanbul', code: 'IST' } }); 
    this.cities.push({ label: 'Paris', value: { id: 5, name: 'Paris', code: 'PRS' } }); 

    } 
    ngOnInit() { 

    } 
} 

Et dans le fichier du module, j'ai importé -

import { DropdownModule } from 'primeng/primeng'; 


imports: [ 
DropdownModule 
] 

index.html

<link rel="stylesheet" type="text/css" href="assets/stylesheet/bootstrap.min.css"> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 

Mais quand je lance projet, il ne me montre ce qu'ils ont fait dans PrimeNG Dropdown exemple au lieu de cette m obtenir ce résultat

Can guide toute personne ou de l'aide moi résoudre où je dois faire des changements. Merci d'avance.

Answer 1

Essayez comme ceci:

NPM installer primeng

npm install primeng --save 

style Ajouter dans la .angular-cli.json

.angular-cli.json

"styles": [ 
    "../node_modules/primeng/resources/themes/omega/theme.css", 
    "../node_modules/primeng/resources/primeng.min.css" 
] 

module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import {DropdownModule} from 'primeng/primeng'; 

@NgModule({ 
    imports: [ 
     DropdownModule, 
     BrowserAnimationsModule 
    ], 
})