'p-table' 不是已知元素：

Question

我已经安装了 PrimeNG 到那里 table 在我按照文档 angular 没有阅读并给我这个错误 “———— p-table' 不是已知元素：

如果 'p-table' 是一个 Angular 组件，则验证它是该模块的一部分。
如果 'p-table' 是 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到此组件的“@NgModule.schemas”以抑制此 message.ng “———— 这是我的 app.module

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AccordionModule } from 'primeng/accordion';     //accordion and accordion tab
import { MenuItem, MessageService } from 'primeng/api';                  //api
import { TableModule } from 'primeng/table';
import { AppRoutingModule } from './app.routing';
import { ComponentsModule } from './components/components.module';
import { TreeModule } from 'primeng/tree';
import { AppComponent } from './app.component';

import { ToastModule } from 'primeng/toast';
import { CalendarModule } from 'primeng/calendar';
import { SliderModule} from 'primeng/slider';
import { MultiSelectModule } from 'primeng/multiselect';
import { ContextMenuModule } from 'primeng/contextmenu';
import { DialogModule } from 'primeng/dialog';
import { ButtonModule } from 'primeng/button';
import { DropdownModule } from 'primeng/dropdown';
import { ProgressBarModule } from 'primeng/progressbar';
import { CommandeService } from "app/shared/commandes.service";

import { InputTextModule } from 'primeng/inputtext';
import { DashboardComponent } from './dashboard/dashboard.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { TableListComponent } from './table-list/table-list.component';
import { TypographyComponent } from './typography/typography.component';
import { IconsComponent } from './icons/icons.component';
import { MapsComponent } from './maps/maps.component';
import { NotificationsComponent } from './notifications/notifications.component';
import { UpgradeComponent } from './upgrade/upgrade.component';

import {
  AgmCoreModule
} from '@agm/core';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    TreeModule,
    ReactiveFormsModule,
    HttpClientModule,
    TableModule,
    CalendarModule,
    SliderModule,
    
        DialogModule,
        MultiSelectModule,
        ContextMenuModule,
        DropdownModule,
        ButtonModule,
        ToastModule,
    InputTextModule,
    ProgressBarModule,
    HttpClientModule,
    FormsModule,
    ComponentsModule,
    RouterModule,
    AppRoutingModule,
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
    })
  ],
  declarations: [
    AppComponent,
    AdminLayoutComponent,

  ],
  providers: [CommandeService,MessageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的table-列表component.ts

import { Component, OnInit } from '@angular/core';
import { MessageService } from "primeng/api";
import{ commandes } from '../shared/commandes.model.ts/commandes.models'
import { CommandeService } from "app/shared/commandes.service";
import { TableModule } from 'primeng/table';


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

  constructor(private commandesrService: CommandeService) {}
  commandes: commandes[];


  heure: any[];

  loading: boolean = true;

  activityValues: number[] = [0, 100];



  ngOnInit() {
    this.commandesrService.getlistbyID().subscribe(
      (data: commandes[]) => {
        console.log(data);
       this.commandes = data;
     
       });

}}

我的package.json

{
  "name": "material-dashboard-angular",
  "version": "2.5.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && ng serve -o"
  },
  "engines": {
    "node": "6.11.1",
    "npm": "3.10.9"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "10.1.4",
    "@angular/cdk": "10.2.4",
    "@angular/common": "10.1.4",
    "@angular/compiler": "10.1.4",
    "@angular/core": "10.1.4",
    "@angular/forms": "10.1.4",
    "@angular/material": "10.2.4",
    "@angular/platform-browser": "10.1.4",
    "@angular/platform-browser-dynamic": "10.1.4",
    "@angular/platform-server": "10.1.4",
    "@angular/router": "10.1.4",
    "@fullcalendar/core": "^5.4.0",
    "ajv": "6.12.5",
    "arrive": "2.4.1",
    "bootstrap": "4.5.2",
    "bootstrap-material-design": "4.1.3",
    "bootstrap-notify": "3.1.3",
    "chart.js": "^2.9.4",
    "chartist": "0.11.4",
    "classlist.js": "1.1.20150312",
    "core-js": "3.6.5",
    "eslint": "^7.10.0",
    "express": "4.17.1",
    "googleapis": "61.0.0",
    "hammerjs": "2.0.8",
    "jquery": "3.5.1",
    "moment": "2.29.1",
    "perfect-scrollbar": "1.5.0",
    "popper.js": "1.16.1",
    "primeicons": "^4.1.0",
    "primeng": "^11.0.0",
    "quill": "^1.3.7",
    "rxjs": "6.6.3",
    "rxjs-compat": "6.6.3",
    "web-animations-js": "2.3.2",
    "zone.js": "0.11.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.1001.4",
    "@angular/cli": "10.1.4",
    "@angular/compiler-cli": "10.1.4",
    "@angular/language-service": "10.1.4",
    "@types/bootstrap": "4.5.0",
    "@types/chartist": "0.11.0",
    "@types/googlemaps": "3.39.14",
    "@types/jasmine": "3.5.14",
    "@types/jquery": "3.5.2",
    "@types/node": "14.11.5",
    "codelyzer": "6.0.1",
    "jasmine-core": "3.6.0",
    "jasmine-spec-reporter": "6.0.0",
    "karma": "5.2.3",
    "karma-chrome-launcher": "3.1.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.5.4",
    "protractor": "7.0.0",
    "ts-node": "9.0.0",
    "tslint": "6.1.3",
    "typescript": "4.0.3"
  }
}

我来这里是为了进一步询问我可以给你的信息

Answer 1

到目前为止我所看到的。直接在您的组件中进行以下导入将不起作用。所以你可以删除它。

import { MessageService } from "primeng/api";
    import{ commandes } from '../shared/commandes.model.ts/commandes.models'
    import { CommandeService } from "app/shared/commandes.service";
    import { TableModule } from 'primeng/table';   <---------- This is not neeeded
    
    
    @Component({
      selector: 'app-table-list',
      templateUrl: './table-list.component.html',
      styleUrls: ['./table-list.component.css']
    })
    export class TableListComponent implements OnInit {
    ...
   ...}

我检查了你的主模块 AppModule

案例 1

如果 TableListComponent 确实属于 AppModule，那么它必须在那里声明。这就是问题所在。在您的 AppModule 中进行以下更正。

@NgModule({
  declarations: [
    AppComponent,
    AdminLayoutComponent,
    ....    <-----------Here it should be declared TableListComponent

  ],
  providers: [CommandeService,MessageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

案例 2

如果 TableListComponent 不属于 AppModule 那么它应该属于另一个模块。然后在那个其他模块中，您应该已经导入了 TableModule，它也应该在 exports[] 中从您的 AppModule 导出，而不是导入，我没有看到发生这种情况。如果是这种情况，您的 AppModule 应该像

import { TableModule } from 'primeng/table';  <-------------


    @NgModule({
      declarations: [
        AppComponent,
        AdminLayoutComponent],
      exports: [ TableModule ]   < ------------ 
      providers: [CommandeService,MessageService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

然后在 TableListComponent 所属的另一个模块中你必须有

@NgModule({
      declarations: [],
      imports: [ TableModule ]   < ------------
    })
    export class SomeModuleParentOfTableListComponent { }

Answer 2

CTRL + P 查找 app.module.ts 并在 @NgModule imports添加 PrimeNG 模块。

示例：

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    TopBarComponent
  ],
  imports: [
    //Some random modules:
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    //PrimeNG Modules examples:
    AccordionModule,
    DropdownModule,
    InputTextModule,
    MultiSelectModule,
    TableModule
  ],
  providers: [],
  entryComponents: []
})

'p-table' 不是已知元素：

'p-table' is not a known element:

angular-template

primeng

angular