Angular 和PrimeNg文件Uploader：渲染元件时如何显示选定文件的列表

发布于02月20日

我正在使用17号角和17号角转录者:

我的目的是有一个或多个预选文件显示在选定的文件列表.正如你所看到的，我在ngAfterViewInit中调用this.fileUpload._files.push(file)，预期的结果是文件列表中有文件.相反，它只在单击" Select "时显示.我还添加了一个变化检测器，但它仍然不工作.

我怎样才能做到这一点呢？

推荐答案

我调用了FileUpload组件内部ChangeDetectorRef中的detectChanges，然后文件开始出现！

 ngAfterViewInit(): void {
    if (this.fileUpload) {
      this.fileUpload._files.push(this.file);
      this.fileUpload.cd.detectChanges(); //   <-changed here!
      this.cdr.detectChanges();
    }
  }

完整代码

import {
  AfterViewInit,
  ChangeDetectorRef,
  Component,
  ViewChild,
  inject,
} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.html',
  imports: [FileUploadModule],
})
export class App implements AfterViewInit {
  cdr = inject(ChangeDetectorRef);
  file = new File([''], 'filename');

  @ViewChild('fileUpload') fileUpload!: FileUpload;

  ngAfterViewInit(): void {
    if (this.fileUpload) {
      this.fileUpload._files.push(this.file);
      this.fileUpload.cd.detectChanges();
      this.cdr.detectChanges();
    }
  }
}

bootstrapApplication(App);

Stackblitz Demo个