我在模态组件(https://www.primefaces.org/primeng/#/fileupload)中使用来自primeng(https://ng-bootstrap.github.io/#/components/modal/examples)的fileUpload组件
当我选择文件并通过ng-template
显示时,我想要一个删除某些文件的按钮。
为了做到这一点,我需要从FileUpload组件中调用remove
方法。
我的问题是这不起作用。
我最初尝试使用ViewChild,但得到undefined
。我不能用户服务,因为这意味着我需要更新包。
代码
<ng-template #upload let-c="close" let-d="dismiss">
<p-fileUpload #fileUpload
customUpload="true"
(uploadHandler)="uploadMultiHandler($event)"
(onSelect)="onFileSelect($event)"
multiple="multiple"
accept="image/*"
maxFileSize="1000000">
<ng-template let-file pTemplate="file">
<div class="ui-fileupload-row">
<div><img [src]="file.objectURL" width="50"/></div>
<div>{{file.name}}</div>
<div>{{formatSize(file.size)}}</div>
<div><button type="button" icon="fa-close" pButton (click)="remove(event, file)"></button></div>
</div>
</ng-template>
<ng-template pTemplate="content">
<ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
</ul>
</ng-template>
</p-fileUpload>
</ng-template>
@ViewChild('fileUpload') fileUpload: FileUpload;
remove(event: Event, file: any) {
const index: number = this.uploadedFiles.indexOf(file);
this.fileUpload.remove(event, index);
}
有没有人有任何想法? 我做错了什么?
我检查过的链接: