Я хочу извлечь свойства name и size из fileList и отобразить в mat-таблице с помощью Angular 6 - PullRequest
Новая
       50

Я хочу извлечь свойства name и size из fileList и отобразить в mat-таблице с помощью Angular 6

0 голосов
/ 26 сентября 2019

У меня есть тег ввода, который принимает несколько файлов, и я хочу отобразить имя файла, размер, описание, которое в основном представляет собой поле ввода и кнопку удаления внутри таблицы mat *

Шаг 1. Я могу принятьнесколько файлов из ввода и могут видеть файлы, выбранные в FileList.

Шаг 2: Я пробовал несколько вещей.Я могу видеть имя и размер, но не могу понять, как передать 2 свойства из FileList в интерфейс.

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

<input
  style="display: none"
  type="file" multiple (change)="onFileSelected($event)"
  #fileInput>
<button type="button" (click)="fileInput.click()">Select File</button>

<table mat-table [dataSource]="dataSource" matSort >

    <ng-container class="mat-column-name" matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Document Name </th>
      <td mat-cell *matCellDef="let element;"><a class="docs" target="_blank" href="/src/assets/Resources/{{element.name}}">{{element[j].name}}</a> </td>
    </ng-container>

    <ng-container class="mat-column-size" matColumnDef="size" >
      <th mat-header-cell  *matHeaderCellDef mat-sort-header> File Size</th>
      <td mat-cell fxFlex="100px" *matCellDef="let element;"> {{element.size}} </td>
    </ng-container>

    <ng-container class="mat-column-desc" matColumnDef="description" >
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
      <td mat-cell fxFlexGap="5px" *matCellDef="let element">
          <mat-form-field  appearance="outline">
            <input  matInput id="inputDesc"></mat-form-field> </td>
      </ng-container>

    <ng-container class="mat-column-delete" matColumnDef="delete">
        <th mat-header-cell *matHeaderCellDef> Action </th>
          <td mat-cell *matCellDef="let element" fxLayoutGap="5px">
            <button mat-mini-fab color="primary"><mat-icon>delete</mat-icon></button>
              </td>
      </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

component.ts file 

onFileSelected(event) {

  this.file_preview = event.target.files;
  console.log(this.file_preview);
  for (let i = 0; i < this.file_preview.length; i++) {
    const file = this.file_preview[i];
    // this.file_details.name = file.name;
    console.log(file.name);
    console.log(file.size);
  }

Интерфейс

export interface PreviewModel {
    name: string;
    size: number;
    description: String;
    }
...