在我没有阅读角度文档并给我这个错误“ ------- p-table”不是一个已知元素之后,我已经安装了PrimeNG到达那里的表:
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] 删除。
我来说两句