将 PrimeNg Table 模块添加到组件导致错误 - 超出最大调用堆栈大小

Question

我有一个 angular 组件 npm 包，它接受 returns 数据。一切正常，直到我尝试将 p-table 添加到我的 html 中。我已将其缩小到出现在组件模块文件中。

我可以将 primeNg table 模块添加到我的 app.module 文件中，但是如果我尝试将它添加到我的组件模块文件中，然后运行 "npm 运行 packagr" 来捆绑我的包，我收到以下错误：

Maximum call stack size exceeded

这是我的 header.module 文件，以及导致错误的两行

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header.component';
import { TableModule } from 'primeng/table'; //TABLE MODULE IS CAUSING THE ERROR

@NgModule({
  declarations: [HeaderComponent],
  imports: [CommonModule, TableModule], //TABLE MODULE IS CAUSING THE ERROR
  exports: [
    HeaderComponent,
  ],
})
export class HeaderModule {}

我查看了这个错误的其他答案，但是他们大多谈论的是递归循环，而我的错误只是通过将 TableModule 添加到模块文件中来实现的。

有谁知道为什么会导致错误？

更新！！！

这是我试图在我的 header.html 文件中实现的 p-table：

  <p-table
    [columns]="this.templateRows"
    [value]="this.tableData"
    responsiveLayout="scroll"
    [scrollable]="true"
    scrollHeight="100px"
    [virtualScroll]="true"
  >
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns">
          {{ col.header }}<br />
          <small>{{ col.regex }}</small>
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
      <tr>
        <td *ngFor="let col of columns">
          {{ rowData[col.header] }}
        </td>
      </tr>
    </ng-template>
  </p-table>

这是导入 table 模块的 app.module：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderModule } from './modules/header/header.module';
import { TableModule } from 'primeng/table';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, HeaderModule, TableModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

这是 header.component.ts 文件

import {
  Component,
  EventEmitter,
  OnInit,
  Input,
  Output,
  ViewChild,
  ElementRef,
} from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

@Component({
  selector: 'app-header-naomi',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
  @ViewChild('fileUpload', { static: false }) fileUpload: ElementRef;
  headerRow: any = [];
  tableData: any = [];
  templateRows = [
    { field: 'name', header: 'Name', regex: '[a-zA-Z]' },
    { field: 'age', header: 'Age', regex: '^[0-9]*$' },
    { field: 'year group', header: 'Year Group', regex: null },
  ];

  constructor() {}

  ngOnInit(): void {
  }
 
  processUpload() {
    const fileUpload = this.fileUpload.nativeElement;
    fileUpload.click();
  }

  async uploadFiles() {
    const fileUpload = this.fileUpload.nativeElement;
    this.tableData = this.validateSpreadsheet(fileUpload, this.templateRows);
  }

  async validateSpreadsheet(fileUpload: any, templateRows: any) {
    let uploadData: any = [];
    for (const file of fileUpload.files) {
      const fileExtension = file.name.split('.').pop();
      let valid = false;
      if (fileExtension === 'csv') {
        valid = true;
      }
      if (!valid) {
        throw "Unsupported file type, file must be 'of type .csv";
      }
      const reader = new FileReader();

      reader.onload = async (e: any) => {
        const data = new Uint8Array(e.target.result);

        const workbook = XLSX.read(data, {
          type: 'array',
          cellDates: true,
          dateNF: 'dd/mm/yyyy',
        });
        if (workbook.SheetNames.length === 0) {
          console.error('No sheets');
        }
        for (const sheetName of workbook.SheetNames) {
          const rows: any = XLSX.utils.sheet_to_json(
            workbook.Sheets[sheetName],
            {
              defval: null,
            }
          );

          for (let row of rows) {
            uploadData.push(row);
          }
        }
      };
      reader.readAsArrayBuffer(file);
      return uploadData;
    }
  }
}

Answer 1

不确定这有什么问题，但我设法通过卸载节点模块和 package-lock.json 文件来修复它。然后重新安装。

将 PrimeNg Table 模块添加到组件导致错误 - 超出最大调用堆栈大小

Adding PrimeNg Table Module to Component Causes Error - Maximum call stack size exceeded

javascript

angular

typescript

npm

primeng