#javascript #angular #typescript #npm #primeng
Вопрос:
У меня есть пакет npm углового компонента, который принимает и возвращает данные. Все это работало нормально, пока я не попытался добавить p-таблицу в свой html. Я сузил его до того, что он встречается в файле модуля компонентов.
Я могу добавить табличный модуль PrimeNG в файл app.module, но если я попытаюсь добавить его в файл модуля компонентов, а затем запустить «npm run packagr», чтобы собрать пакет, я получу следующую ошибку:
Maximum call stack size exceeded Вот мой файл заголовка.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 {} Я просмотрел другие ответы на эту ошибку, однако они в основном говорят о рекурсивном цикле, в то время как моя ошибка возникает просто при добавлении табличного модуля в файл модулей.
Кто-нибудь знает, почему это вызывает ошибку?
ОБНОВЛЕНИЕ!!!
Вот таблица p, которую я пытаюсь реализовать в своем header.html файл:
lt;p-table [columns]="this.templateRows" [value]="this.tableData" responsiveLayout="scroll" [scrollable]="true" scrollHeight="100px" [virtualScroll]="true" gt; lt;ng-template pTemplate="header" let-columnsgt; lt;trgt; lt;th *ngFor="let col of columns"gt; {{ col.header }}lt;br /gt; lt;smallgt;{{ col.regex }}lt;/smallgt; lt;/thgt; lt;/trgt; lt;/ng-templategt; lt;ng-template pTemplate="body" let-rowData let-columns="columns"gt; lt;trgt; lt;td *ngFor="let col of columns"gt; {{ rowData[col.header] }} lt;/tdgt; lt;/trgt; lt;/ng-templategt; lt;/p-tablegt; And here is the app.module which imports the tableModule fine:
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 {} Вот файл заголовка.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]*
Комментарии:
1. Привет. У вас есть реализация TableModule на HeaderComponent? Можете ли вы поделиться кодом компонента?
2. @Guiditox Здравствуйте, у меня есть таблица ptable, закомментированная в моем html-компоненте заголовка, потому что я просто получаю ошибку при попытке добавить ее в модуль
3. Да, но если у вас есть ошибка в TableModule, и вы используете модуль таблицы в HeaderComponent, важно увидеть вашу реализацию.
4. Ваше приложение.модуль все в порядке
5. Пожалуйста, введите свой код заголовка .ts.
Ответ №1:
Не уверен, что в этом было не так, но мне удалось это исправить, удалив модули узлов и файл.json с блокировкой пакетов. Затем переустановил.
}, { 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) =gt; { 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; } } }
Комментарии:
1. Привет. У вас есть реализация TableModule на HeaderComponent? Можете ли вы поделиться кодом компонента?
2. @Guiditox Здравствуйте, у меня есть таблица ptable, закомментированная в моем html-компоненте заголовка, потому что я просто получаю ошибку при попытке добавить ее в модуль
3. Да, но если у вас есть ошибка в TableModule, и вы используете модуль таблицы в HeaderComponent, важно увидеть вашу реализацию.
4. Ваше приложение.модуль все в порядке
5. Пожалуйста, введите свой код заголовка .ts.
Ответ №1:
Не уверен, что в этом было не так, но мне удалось это исправить, удалив модули узлов и файл.json с блокировкой пакетов. Затем переустановил.