“p-table”不是已知的元素：

Question

我安装了PrimeNG来获取表，在我遵循文档的角度没有读取并给我这个错误之后“- p- table‘不是一个已知的元素：

如果“p-table”是一个角度分量，则验证它是该模块的一部分。如果“p-table”是一个Web组件，则将“

1. ”添加“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 { }

我的表列表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，也应该在导出时从您导出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: []
})