Блог

Я установил PrimeNG, чтобы получить там таблицу после того, как я следил за документацией, которую angular не читал, и выдал мне эту ошибку «——- p-table’ не является известным элементом:

1. Если ‘p-table’ является компонентом Angular, то убедитесь, что он является частью этого модуля.
2. Если ‘p-table’ является веб-компонентом, добавьте ‘CUSTOM_ELEMENTS_SCHEMA’ в ‘@NgModule.schemas’ этого компонента, чтобы подавить это message.ng «——- это мое приложение.модуль

 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/ amp;amp; rm -rf package-lock.json amp;amp; npm install amp;amp; 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 { }
 

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: []
})