Как отобразить ранее загруженные файлы с помощью ng2-file-upload - PullRequest
Новая
       13

Как отобразить ранее загруженные файлы с помощью ng2-file-upload

0 голосов
/ 28 ноября 2018

Я использую 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>

Я загрузил загруженные файлы в массив 'Queue', Как я могу отобразить это здесь 

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

1 Ответ

0 голосов
/ 29 ноября 2018

Если вы хотите отобразить как загружаемые файлы, так и уже загруженные файлы в одной таблице, есть несколько способов сделать это.

Вы можете сначала отобразить файлы в прогах, а затем уже загруженные файлы: 

<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.
Вместо того, чтобы выбирать только имя, размер и идентификатор, вы должны добавить его следующим образом: 

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

Учитывая, что объект "файл" относится к тому же типу, что и файлы из uploader.queue.

В этом нет ничего волшебного, все зависит от того, как вы хотите отобразить объекты.

...