Как экспортировать данные из таблицы, имеющей вход внутри mat-ячейки?

Question

У меня есть проект в материалах Angular, в котором я пытаюсь экспортировать данные из таблицы в файл, используя MatTableExporter модуль.

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

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

Это мое component.html:

      <div class="title">Customers</div>
<mat-divider></mat-divider>

<div fxLayout="column" fxLayoutGap="10px" class="m-3">
  <mat-card class="mat-elevation-z8">
  
    <div>
      <button mat-raised-button
        (click)="exporter.exportTable('xlsx')">Export excel
      </button>
    </div>
    
    <mat-table matTableExporter [dataSource]="clients" #exporter="matTableExporter">
    
      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
        <mat-cell *matCellDef="let clients"> {{clients.id}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let clients; let i = index">
          <mat-form-field floatLabel="never" [appearance]="editIndex != i ? 'none' : 'legacy'">
            <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name" [readonly]="editIndex!=i">
          </mat-form-field>
        </mat-cell>
      </ng-container>
      </ng-container>
      
      <ng-container matColumnDef="act">
        <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
        <mat-cell *matCellDef="let element
          <button mat-icon-button matTooltip="Edit" (click)="edit(element)">
            <mat-icon class="icon_edit_button">edit</mat-icon>
          </button>
          <button *ngIf="editIndex != i" mat-icon-button matTooltip="Delete" (click)="delete(element)">
            <mat-icon>delete_forever</mat-icon>
          </button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let col; columns: displayedColumns;"></mat-row>

    </mat-table>
    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  </mat-card>
</div>

Это мое xlsx файл:

Answer 1

Чтобы удалить столбец действий из XLS, вы можете добавить его как скрытый столбец в mat-tableтег. Здесь вы передаете массив индексов столбцов, которые хотите исключить из XLS:

      <mat-table ... [hiddenColumns]="[2]">

Чтобы отобразить имя в XLS, вы можете добавить строку:

      <span class="cdk-visually-hidden">{{clients.name}}</span>

так что ваш второй столбец станет:

      <mat-cell *matCellDef="let clients; let i = index">
  <span class="cdk-visually-hidden">{{clients.name}}</span>
  <mat-form-field floatLabel="never" [appearance]="editIndex != i ? 'none' : 'legacy'">
    <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name" [readonly]="editIndex!=i">
  </mat-form-field>
</mat-cell>

Это добавляет скрытое поле, содержащее имя. Потому что вы используете [(ngModel)] у вас есть двухсторонняя привязка, и любые изменения, которые пользователь вносит в имя в input поле, будет отражено в скрытом поле и, следовательно, в XLS при его экспорте.

Вот StackBlitz, показывающий, как это работает. Просто измените одно (или несколько) полей имени и нажмите кнопку «Экспорт в Excel», и вы должны получить следующее:

Answer 2

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

При нажатии кнопки или действия пользователя я получаю массив элементов FormGrop и просто конвертирую его в массив объектов домена.

this.address.inputRecords => Машинопись объекта моего домена []

let json = JSON.stringify(this.address.inputRecords);

      const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(
  JSON.parse(json)
);
const wb: XLSX.WorkBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, worksheet, 'Sheet1');