关于 Angular 8 中的 PrimeNg 表答案

【问题标题】：Regarding PrimeNg table in Angular 8关于 Angular 8 中的 PrimeNg 表
【发布时间】：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-browser": "~9.1.0", "@angular/platform-browser-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 " }

标签： html angular typescript angular-material primeng

【解决方案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 服务。

它对我有用。

【讨论】：