如何使用ng2文件上传显示以前上传的文件

Question

我使用的是ng2-file-upload，文件上传正确，但我也想显示之前上传的文件，我调用了API，并将所有之前上传的文档存储在组件中的数组中，但如何在HTML页面上显示。

<div class="container">
<div class="row">
<div class="col-md-3">
<h3>Select files</h3>
Multiple
<input type="file" ng2FileSelect [uploader]="uploader" multiple  /><br/>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th>Size</th>
<th>Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of uploader.queue">
<td><strong>{{ item?.file?.name }}</strong></td>
<td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
<td *ngIf="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
</div>
</td>
</tr>
</tbody>
</table>
<div>
<button type="button" class="btn btn-success btn-s"
(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s"
(click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s"
(click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
</div>
</div>
</div>

我已经在"队列"数组中提取了上传的文件，我如何在这里显示

uploadfiles() {
this.common.getData(url).subscribe(
data => {
this.queue.push({
name: file.Name,
id: file.Id,
size: file.Size
})}

Answer 1

如果您想在一个表中同时显示正在上传的文件和已经上传的文件，有几种方法可以实现。

您可以首先显示进程中的文件，然后显示已上传的文件：

<tbody>
<tr *ngFor="let item of uploader.queue">
<!-- Whatever you want to display -->
</tr>
<tr *ngFor="let uploadedFiles of queue">
<!-- Whatever you want to display -->
</tr>
</tbody>

注意要有相同的数量，这样表就有相同的列数(例如，第二部分的进度列可以为空。这取决于你想如何显示数据(

或者，您可以将两个数组合并为一个数组，并用一个*ngFor显示它。为此，您必须检查上传文件和之前通过api获得的文件之间的数据结构是否一致
您不应该只选择名称、大小和id，而应该这样添加：

this.queue.push({
file: file
})}

考虑到"文件"对象与uploader.queue.中的文件类型相同

它没有什么神奇之处，一切都取决于你想要如何显示对象。