將PrimeNg表模塊添加到組件會導致錯誤-超出最大呼叫堆疊大小

我有一個角度組件 npm 包，它接受并回傳資料。一切正常，直到我嘗試將 p 表添加到我的 html 中。我已將其范圍縮小到發生在組件模塊檔案中。

我可以將 primeNg tableModule 添加到我的 app.module 檔案中，但是如果我嘗試將它添加到我的組件模塊檔案中，然后運行“npm run 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 表：

  <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>

這是匯入 tableModule 的 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;
    }
  }
}

uj5u.com熱心網友回復：

不確定這有什么問題，但我設法通過卸載節點模塊和 package-lock.json 檔案來修復它。然后重新安裝。

標籤：javascript 有角的 打字稿 新产品经理 引物

上一篇：Win10上的ioBroker

下一篇：安裝全域npm包后出現“錯誤：ENOENT：沒有這樣的檔案或目錄”