angular - Primeng 组件 UI 问题

Question

我正在研究 PrimeNG 组件。但是我在 Web 浏览器上显示 UI 时遇到问题。

现在，我想显示静态下拉菜单。我引用了 PrimeNG .以下代码用于显示该组件。

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>

组件文件

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() {

  }
}

在模块文件中，我导入了 -

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"

但是当我运行项目时，它没有向我展示他们在 PrimeNG Dropdown 示例 中所做的事情，而不是让我得到这个结果

任何人都可以指导或帮助我解决我需要进行更改的地方。提前致谢。

Answer 1

像这样尝试:

npm 安装 primeng

npm install primeng --save

在 .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
    ],
})