Angular 17+PrimeNG FileUploader：渲染组件时如何显示预选文件列表？

直接操作PrimeNG FileUpload的私有属性_files不可行，因为私有属性属于组件内部状态，外部直接修改不会触发组件的UI更新逻辑——这就是你手动push文件后，只有点击Choose按钮才会显示的原因（点击按钮时组件会执行内部的状态同步流程）。

正确的实现方式有两种：

1. 通过files输入属性绑定预选文件 #

在组件中定义预选文件数组，直接绑定到FileUpload的files属性，组件初始化时自动渲染列表：

组件代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  preselectedFiles: File[] = [];

  ngOnInit() {
    // 模拟生成预选文件，实际场景可替换为后端获取的文件转换为File实例
    const demoFile1 = new File(['示例内容1'], 'demo1.txt', { type: 'text/plain' });
    const demoFile2 = new File(['示例内容2'], 'demo2.jpg', { type: 'image/jpeg' });
    this.preselectedFiles = [demoFile1, demoFile2];
  }
}

模板代码 #

<p-fileUpload [files]="preselectedFiles" mode="advanced"></p-fileUpload>

2. 调用组件公开方法addFiles动态添加 #

如果需要在视图初始化后（比如ngAfterViewInit）动态添加预选文件，使用FileUpload组件提供的addFiles公开方法，而非操作私有属性：

组件代码 #

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { FileUpload } from 'primeng/fileupload';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('fileUpload') fileUpload!: FileUpload;

  ngAfterViewInit() {
    const demoFile = new File(['动态添加的文件'], 'dynamic-file.pdf', { type: 'application/pdf' });
    // 调用公开方法添加文件，自动触发UI更新
    this.fileUpload.addFiles([demoFile]);
  }
}

模板代码 #

<p-fileUpload #fileUpload mode="advanced"></p-fileUpload>

关键注意点：

• 避免直接修改PrimeNG组件的私有属性（以_开头的属性），这类属性不属于组件的公开API，版本更新时可能会被修改，导致代码失效。
• 所有预选文件必须是File类型的实例，如果是从后端获取的文件信息，需要将其转换为File对象后再传入。

内容的提问来源于stack exchange，提问作者codrut