Angular中P-FileUpload自定义ng-template后默认列表仍显示的解决方法

问题描述 #

在Angular项目中使用PrimeNG的p-fileUpload组件处理PDF文件上传，自定义了pTemplate="content"模板来展示PDF图标与文件名，但默认文件列表和自定义模板同时显示，需要移除默认的文件列表。

原始代码 #

<p-fileUpload
  #uploader
  [multiple]="true"
  [maxFileSize]="1000000"
  [fileLimit]="5"
  dragDropSupport="true"
  [showUploadButton]="false"
  [customUpload]="true"
  (onSelect)="onSelectFile($event, uploader)"
  accept="application/pdf"
>
  <ng-template pTemplate="content">
    <ul *ngIf="uploader.files">
      <li *ngFor="let file of uploader.files">
        <img
          src="/assets/images/pdfimage.png"
        />
        {{ file.name }}
      </li>
    </ul>
  </ng-template>
</p-fileUpload>

解决方案 #

方法一：通过组件属性控制（推荐） #

给p-fileUpload组件添加[showFileList]="false"属性，直接关闭默认文件列表的显示，自定义模板不受影响：

<p-fileUpload
  #uploader
  [multiple]="true"
  [maxFileSize]="1000000"
  [fileLimit]="5"
  dragDropSupport="true"
  [showUploadButton]="false"
  [customUpload]="true"
  (onSelect)="onSelectFile($event, uploader)"
  accept="application/pdf"
  [showFileList]="false" <!-- 添加该属性隐藏默认列表 -->
>
  <ng-template pTemplate="content">
    <ul *ngIf="uploader.files">
      <li *ngFor="let file of uploader.files">
        <img
          src="/assets/images/pdfimage.png"
        />
        {{ file.name }}
      </li>
    </ul>
  </ng-template>
</p-fileUpload>

方法二：通过CSS隐藏默认列表 #

如果不想修改组件属性，可以在组件的样式文件中添加以下CSS代码，穿透PrimeNG的样式封装来隐藏默认文件列表容器：

:host ::ng-deep .p-fileupload-files {
  display: none;
}

内容的提问来源于stack exchange，提问作者Imran Ahmad Shahid