Angular 8 PrimeNG p-table 分页样式

Question

我正在尝试使用 PrimeNG 制作一个分页表，但我得到了这个几乎没有样式的基本表

我希望它具有与此相同的样式stackblitz
我想我已经安装并导入了所有必需的包。另外，我在angular.json 文件中添加了所需的styles 路径。

这是我的 package.json

{
  "name": "shopping-cart",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@auth0/angular-jwt": "^4.2.0",
    "bootstrap": "^4.5.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "primeflex": "^3.1.2",
    "primeicons": "^5.0.0",
    "primeng": "^8.1.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.0",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "shopping-cart": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/shopping-cart",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.css",
              "./node_modules/primeicons/primeicons.css",
              "./node_modules/primeng/resources/themes/nova-light/theme.css",
              "./node_modules/primeflex/primeflex.css",
              "./node_modules/primeng/resources/primeng.min.css",
              "./src/styles.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "shopping-cart:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "shopping-cart:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "shopping-cart:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.css",
              "./node_modules/primeicons/primeicons.css",
              "./node_modules/primeng/resources/themes/nova-light/theme.css",
              "./node_modules/primeflex/primeflex.css",
              "./node_modules/primeng/resources/primeng.min.css",
              "./src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "shopping-cart:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "shopping-cart:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "shopping-cart"
}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { JwtModule } from "@auth0/angular-jwt";
import { TableModule } from "primeng/table";
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 { InputTextModule } from "primeng/inputtext";
//import components and services

export function tokenGetter() {
  return sessionStorage.getItem("jwt");
}

@NgModule({
  declarations: [
    //components
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    TableModule,
    ToastModule,
    CalendarModule,
    SliderModule,
    MultiSelectModule,
    ContextMenuModule,
    DialogModule,
    ButtonModule,
    DropdownModule,
    ProgressBarModule,
    InputTextModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        whitelistedDomains: ["localhost:44346"],
        blacklistedRoutes: [],
      },
    }),
  ],
  providers: [
    //services
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

component.html

<div class="container" style="padding-left: 15px">
  <h1>{{ title }}</h1>
  <hr />

  <p>
    <a class="btn btn-primary" routerLink="/item/add">Add New Item</a>
  </p>
  <p-table
    [value]="items"
    [lazy]="true"
    (onLazyLoad)="loadItems($event)"
    [paginator]="true"
    [rows]="numberOfRows"
    [totalRecords]="totalRecords"
    [loading]="loading"
  >
    <ng-template pTemplate="header">
      <tr>
        <th>Name</th>
        <th>Price</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-item>
      <tr>
        <td>{{ item.name }}</td>
        <td>$ {{ item.price }}</td>
      </tr>
    </ng-template>
  </p-table>
</div>

组件.ts

import { Component, OnInit, ViewEncapsulation } from "@angular/core";
import { Item } from "src/app/models/item";
import { LazyLoadEvent } from "primeng/api";
import { ItemService } from "src/app/services/admin/item.service";

@Component({
  selector: "app-items-list2",
  templateUrl: "./items-list2.component.html",
  styleUrls: ["./items-list2.component.css"],
  encapsulation: ViewEncapsulation.None,
})
export class ItemsList2Component implements OnInit {
  constructor(private itemService: ItemService) {}
  title: string;
  loading: boolean = true;
  totalRecords: number;
  pageNumber: number = 1;
  numberOfRows: number = 3;
  items: Item[] = [];
  ngOnInit() {
    this.title = "Manage Products";
    this.loading = true;
  }

  getItems() {
    this.itemService.getItems(this.pageNumber).subscribe((data) => {
      this.items = data["list"];
      this.totalRecords = data["totalCount"];
      this.loading = false;
    });
  }

  loadItems(event: LazyLoadEvent = null) {
    this.pageNumber = event.first / this.numberOfRows + 1;
    this.loading = true;
    this.getItems();
  }
}

我缺少什么来解决这个问题？
提前致谢。

Answer 1

在您的文件 app.component.ts 中使用 to：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

如果您的问题仍然存在，请在代码中使用封装。

1. 如果您只想在一个组件中更改其设置，请在该组件的 .ts 文件中输入您的封装类型。例如，在这里，我将封装值设置为 none：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})

1. 但是，如果您想将更改应用到整个项目，请转到您的 main.ts 文件并输入您的 capsule，如下所示：

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule
  ,
  [
    {
      defaultEncapsulation: ViewEncapsulation.None
    }
  ]
).catch(err => console.error(err));

请参阅下面链接中的说明和不同的封装模式。 enter link description here

Answer 2

将以下更改应用于 angular.json 文件的地址

                        "styles": [
                            "src/styles.scss",
                            "./node_modules/primeflex/primeflex.css",
                            "./node_modules/igniteui-angular/styles/igniteui-angular.css",
                            "./node_modules/primeng/resources/themes/saga-orange/theme.css",
                            "./node_modules/primeng/resources/primeng.min.css",
                            "./node_modules/primeicons/primeicons.css"
                        ],

Answer 3

查看我对您的代码所做的更改对我有用