我在AppRoutingModule下创建了一个组件(EmployeesListComponent),用于处理我的应用程序路由。我想将PrimeNG用于EmployeesListComponent。 该组件的模板具有一个HTML表,其中包含从服务中显示的数据。 根据关于setup和tables的PrimeNG文档,我已经在AppRoutingModule中导入了必要的模块。
尽管这样做,使用ng build
命令构建应用程序时出现以下错误。
C:\Files\Workspaces\pms-ui>ng build
ERROR in src/app/employees-list/employees-list.component.html:2:1 - error NG8001: 'p-table' is not a known element:
1. If 'p-table' is an Angular component, then verify that it is part of this module.
2. If 'p-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
2 <p-table [value]="employeeArrayData">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/employees-list/employees-list.component.ts:7:16
7 templateUrl: './employees-list.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component EmployeesListComponent.
src/app/employees-list/employees-list.component.html:2:10 - error NG8002: Can't bind to 'value' since it isn't a known property of 'p-table'.
1. If 'p-table' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'p-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
2 <p-table [value]="employeeArrayData">
~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/employees-list/employees-list.component.ts:7:16
7 templateUrl: './employees-list.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component EmployeesListComponent.
这是我的文件。
app-routing.module.ts
import { NgModule } from '@angular/core';
import { TableModule } from 'primeng/table';
import { Routes, RouterModule } from '@angular/router';
import { EmployeesListComponent } from './employees-list/employees-list.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
const routes: Routes = [
{ path: 'employees', component: EmployeesListComponent}
];
@NgModule({
imports: [BrowserAnimationsModule, TableModule, RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [EmployeesListComponent]
employee-list.component.ts
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
import { IEmployeeListData } from '../employees-list/employee-data'
@Component({
selector: 'app-employees-list',
templateUrl: './employees-list.component.html',
styleUrls: ['./employees-list.component.css']
})
export class EmployeesListComponent implements OnInit {
public employeeArrayData: Array<IEmployeeListData> = [];
constructor(private employeeService:EmployeeService) { }
ngOnInit(): void {
this.employeeService.getAllEmployees()
.subscribe(data =>
{
this.employeeArrayData = data
});
}
}
employee-list.component.ts
<br><br><br>
<p-table [value]="employeeArrayData">
<ng-template pTemplate="header">
<tr>
<th>Company Employee Id</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Phone Number</th>
<th>E-mail Id</th>
<th>Designation</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-employee>
<tr>
<td>{{employee.companyEmployeeId}}</td>
<td>{{employee.empFirstName}}</td>
<td>{{employee.empMiddleName}}</td>
<td>{{employee.empLastName}}</td>
<td>{{employee.empPhoneNumber}}</td>
<td>{{employee.emailId}}</td>
<td>{{employee.employeeDesignation}}</td>
</tr>
</ng-template>
</p-table>
如果有人需要 app.module.ts , app.component.ts 和 app.component.html
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { CoreNavigationModule } from './core-navigation/core-navigation.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
@NgModule({
declarations: [
AppComponent,
DashboardComponent
],
imports: [
BrowserModule,
HttpClientModule,
CoreNavigationModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(){
}
ngOnInit(){
}
}
app.component.html
<app-core-header></app-core-header>
<app-core-navbar></app-core-navbar>
<app-dashboard></app-dashboard>
<router-outlet></router-outlet>
<app-core-footer></app-core-footer>
请让我知道我在这里缺少哪些导入以及如何进行正确的配置。 PrimeNG文档对该错误的帮助不大。
答案 0 :(得分:1)
声明中似乎缺少EmployeesListComponent (app.module.ts)。 尝试在那里添加它以及可能缺少的其他组件,这应该可以解决问题。
答案 1 :(得分:0)
-I have faced the same issue.
the following worked for me
1) install the dependent packages like primeNg,primeicons,chart.js, quill,fullcalendar/core
**npm install package name**
npm install chart.js
npm install quill
npm install @fullcalendar/core
2)In Angular.json in style array add the path of primeng related CSS as below.
"styles": [
"src/styles.sass",
"./node_modules/primeng/resources/themes/nova-light/theme.css",
"./node_modules/primeng/resources/primeng.min.css",
"./node_modules/primeicons/primeicons.css",
"./node_modules/bootstrap/dist/css/bootstrap.css"
],