“ p-table”不是已知元素:

雅西·法塔纳西(Yassine Fatnassi)

在我没有阅读角度文档并给我这个错误“ ------- p-table”不是一个已知元素之后,我已经安装了PrimeNG到达那里的表:

  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 { }

我的表列表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"
  }
}

我在这里有任何其他我可以给您的信息问题

帕纳吉奥蒂斯·布吉欧科斯

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

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中以exports []导出,而不是导入(我看不到这种情况)。如果是这种情况,您的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 { }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在<p>元素中插入<span>

来自分类Dev

dnn:label不是已知元素

来自分类Dev

实现<o:graphicImage>而不是<p:megaMenu>的<p:menuitem>中的图标

来自分类Dev

隐藏p元素

来自分类Dev

Angular 2 RC6-“侧边栏”不是已知元素

来自分类Dev

角度-模板解析错误<component>不是已知元素

来自分类Dev

模板解析错误:不是已知元素

来自分类Dev

组件不是已知元素[Angular]

来自分类Dev

“ mat-toolbar”不是已知元素:

来自分类Dev

“全日历”不是已知元素:

来自分类Dev

Angular 9-不是一个已知的元素

来自分类Dev

<selector>不是Angular 9自定义库的已知元素

来自分类Dev

将<p>更改为<table>

来自分类Dev

Angular 10-NewComponent不是已知元素

来自分类Dev

Nativescript Angular错误NG8001:“ StackLayout”不是已知元素:

来自分类Dev

错误NG8001:“ nz-layout”不是已知元素

来自分类Dev

'<selector>'不是已知的元素

来自分类Dev

jQuery,返回p元素的整数

来自分类Dev

next()在<p>元素内失败

来自分类Dev

Ajax Control Toolkit-ToolkitScriptManager不是已知元素

来自分类Dev

无法找到嵌套的p元素

来自分类Dev

元素UploadAttachments不是已知的元素

来自分类Dev

元素“Listitem”不是已知元素

来自分类Dev

角度嵌入:X 不是已知元素

来自分类Dev

Angular e2e 测试:组件不是已知元素

来自分类Dev

角度'路由器插座'不是已知元素'

来自分类Dev

Angular5/Karma“选择器”不是已知元素

来自分类Dev

'ngbd-accordion-basic' 不是已知元素:

来自分类Dev

组件选择器不是已知元素