关于 Angular 8 中的 PrimeNg 表

Posted 2023-03-13

【中文标题】关于 Angular 8 中的 PrimeNg 表

【英文标题】：Regarding PrimeNg table in Angular 8

【发布时间】：2020-07-15 04:04:39

【问题描述】：

我尝试在我的 Angular 应用程序中使用 p-table(PrimeNg table)，我从 CLI 导入了所有必需的依赖项并在模块文件中导入，错误是，

目标入口点“primeng/table”中的错误缺少依赖项： - @angular/cdk/scrolling

    import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  FormsModule  from '@angular/forms';

import  AppRoutingModule  from './app-routing.module';
import  AppComponent  from './app.component';
import  AccordionModule  from 'primeng/accordion'; //accordion and accordion tab
import  MenuItem  from 'primeng/api';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
import  TableModule  from 'primeng/table';

@NgModule(
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, AccordionModule,TableModule],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule 

我的component.html是：

<h1>Hello  title </h1>
<br />

<p-table [value]="detail">
  <ng-template pTemplate="header">
    <tr>
      <th>Vin</th>
      <th>Year</th>
      <th>Brand</th>
      <th>Color</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-car>
    <tr>
      <td>Aashiq</td>
      <td>Aadhil</td>
      <td>Zubair</td>
      <td>Athaa</td>
    </tr>
  </ng-template>
</p-table>

我的 app.component.ts 是：

import  Component,OnInit  from '@angular/core';


@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent implements OnInit 
  ngOnInit(): void 

    throw new Error("Method not implemented.");
  
  title = 'Angularprimeng';
    detail:any;

【问题讨论】：

您的 primeng 和 angular/cdk 版本是否兼容，即 8 与 8 或 9 与 9？

"依赖项": "@angular/animations": "^9.1.0", "@angular/cdk": "^9.2.0", "@angular/common": "~ 9.1.0”、“@angular/compiler”：“~9.1.0”、“@angular/core”：“~9.1.0”、“@angular/forms”：“~9.1.0”、“@angular /platform-b​​rowser": "~9.1.0", "@angular/platform-b​​rowser-dynamic": "~9.1.0", "@angular/router": "~9.1.0", "primeicons": " ^2.0.0”、“primeng”：“^9.0.5”、“rxjs”：“~6.5.4”、“tslib”：“^1.10.0”、“zone.js”：“~0.10.2 "

【参考方案1】：

晚上好！

你试过安装材料cdk吗？

npm install @angular/cdk --save

这应该可以解决您的问题。

问候，

乔纳森

【讨论】：

这行得通，但表格格式没有出现，只是显示了标题，但视图/模板（.html）文件中没有错误。

【参考方案2】：

我很高兴得知您的包依赖问题已得到解决。

对于您的第二个问题，鉴于您的代码，表格中没有任何内容是完全正常的。

您在 HTML 文件中声明的 pTemplate “body”用于构建“detail”属性中存在的每个元素的信息，该属性应该是一个数组。

请您仔细阅读 PrimeNg 文档以纠正您的错误。

https://primefaces.org/primeng/showcase/#/table

希望我对你有所帮助。祝你有个愉快的夜晚，很快再见！

【参考方案3】：

我也遇到过同样的问题。 请通过 Angular CLI 命令安装以下依赖包。

npm install --save @angular/material @angular/cdk @angular/animations

然后再次通过命令启动应用程序 ng 服务。

它对我有用。