Primeng 组件 UI 个问题
Primeng Component UI issues
我正在研究 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 下拉示例 中所做的事情,而不是我得到这个结果
任何人都可以指导或帮助我解决我需要进行更改的地方。提前致谢。
像这样尝试:
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
],
})
我正在研究 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 下拉示例 中所做的事情,而不是我得到这个结果
任何人都可以指导或帮助我解决我需要进行更改的地方。提前致谢。
像这样尝试:
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
],
})