Как отобразить загруженные файлы в таблице загрузки файлов ng2 с формой редактирования в Angular 8 - PullRequest
3 голосов
/ 13 января 2020

У меня есть список записей в таблице. Запись таблицы имеет три варианта (просмотр, редактирование, удаление). Каждая запись имеет документ.

Далее, когда пользователь нажимает на опцию редактирования. Я извлечу сохраненную запись, затем открою модальное окно и покажу записи. Здесь у меня есть таблица загрузки файла ng2 внизу. Там я хочу перечислить файлы. Пользователь может удалять и добавлять новые файлы.

    <p class="card-description"><strong>Upload Documents</strong></p>

    <div class="row">
        <div class="col-sm-6">
            <div class="form-group row">
                <label class="col-sm-3 col-form-label" for="files">Documents</label>
                <div class="col-sm-9">
                    <span class="hidden-file">
                        <input type="file" #fileInput ng2FileSelect [uploader]="uploader" multiple class="form-control"
                            (onFileSelected)="onFileSelected($event)" />
                    </span>
                    <div class="btn-group mt-2" (click)="fileInput.click()">
                        <button type="button" class="btn btn-primary btn-group-icon btn-group-divider">
                            <i class="fa fa-plus-square"></i>
                        </button>
                        <button type="button" class="btn btn-primary">
                            Add Documents
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <p class="card-description"><strong>Documents List</strong></p>
    <div class="row">
        <div class="col-sm-9">
            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Size</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of uploader.queue">
                        <td>
                            {{ item?.file?.name }}
                        </td>
                        <td>
                            {{ item?.file?.size/1024/1024 | number:'.2' }} MB
                        </td>
                        <td>
                            <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()">
                                <span class="fa fa-trash-o"></span>
                                Remove
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...