У меня есть список записей в таблице. Запись таблицы имеет три варианта (просмотр, редактирование, удаление). Каждая запись имеет документ.
Далее, когда пользователь нажимает на опцию редактирования. Я извлечу сохраненную запись, затем открою модальное окно и покажу записи. Здесь у меня есть таблица загрузки файла 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>