Я создал компонент (EmployeesListComponent) в AppRoutingModule, который имеет дело с маршрутизацией моего приложения. Я хочу использовать PrimeNG для EmployeesListComponent. Шаблон этого компонента имеет таблицу HTML с данными, отображаемыми из службы. В соответствии с документацией для PrimeNG относительно setup и таблиц я импортировал необходимые модули в 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 не очень помогла в этой ошибке.