如何修复由于 primeng fileupload 模块 p-fileupload 标签而导致 Angular 构建失败的问题

Question

错误：src/app/shared/fileupload/fileupload.component.html:2:87 - 错误 NG8002：无法绑定到“多个”，因为它不是已知的道具 'p-fileUpload' 的权限。

1. 如果“p-fileUpload”是一个 Angular 组件并且它具有“多个”输入，则验证它是否是该模块的一部分。
2. 如果“p-fileUpload”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制 t 他的消息。
3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。

HTML：

应用程序模块.ts

导入的FileuploadModule

Answer 1

您可能没有正确导入

FileUploadModule

。

检查这个

AppModule

示例：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FileUploadModule } from 'primeng/fileupload'; // <-- import the module
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FileUploadModule, // <-- add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

您的 HTML 片段也有一些问题：

• maxFileSize

  有一个额外的空间

• maxFileSize

  具有字符串类型而不是数字

• p-fileUpload

  标签未关闭

这是更正后的版本：

<p-fileUpload name="myfile[]"
              url="https://www.primefaces.org/cdn/api/upload.php"
              [multiple]="true"
              accept="image/*"
              [maxFileSize]="1000000"></p-fileUpload>

从 Angular 16 开始，组件可以使用自闭合标签：

<p-fileUpload name="myfile[]"
              url="https://www.primefaces.org/cdn/api/upload.php"
              [multiple]="true"
              accept="image/*"
              [maxFileSize]="1000000" />