【问题标题】:'p-table' is not a known element:'p-table' 不是已知元素:
【发布时间】:2020-12-17 18:35:26
【问题描述】:

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

  1. 如果“p-table”是一个 Angular 组件,则验证它是该模块的一部分。
  2. 如果“p-table”是 Web 组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。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 { }

我的表格列表组件.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"
  }
}

如有任何进一步的信息问题,我可以提供给您

【问题讨论】:

    标签: angular primeng angular-template


    【解决方案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,它也应该在 export[] 中从 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 { }
    

    【讨论】:

      【解决方案2】:

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

      示例:

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

      【讨论】:

        猜你喜欢
        • 2019-06-22
        • 2020-09-14
        • 2020-06-19
        • 1970-01-01
        • 1970-01-01
        • 2017-11-03
        • 2017-07-27
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多