如何从 table 中导出数据，该 table 在 mat-cell 中有输入？

Question

我在 Angular material 中有一个项目，我正在尝试使用 MatTableExporter 模块将数据从 table 导出到 xlsx 文件。

我有 ID、Name 和 actions 列（编辑和删除），但它只显示列 ID 和操作，名称列显示为空。

我的问题: 因为名称列显示为空，我怎样才能让数据显示出来？如何从 xlsx 文件中删除操作列？

这是我的 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)] 你有 2 种方式绑定并且用户对 input 字段中的名称所做的任何更改都会反映在隐藏字段中，因此在你导出它时会反映在 XLS 中。

这里 a StackBlitz 展示了这个工作原理。只需更改一个（或多个）名称字段并点击“导出 excel”按钮，您应该得到：

Answer 2

我有一个不同的用户案例。我必须在 Mat Table 中显示一组表单元素，用户可以编辑并将所有元素作为数组提交。

在单击按钮或用户操作时，我得到了 FormGrop 元素数组并刚刚转换为我的域对象数组。

this.address.inputRecords=> My domain object  typescript []

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');

如何从 table 中导出数据，该 table 在 mat-cell 中有输入？

How to export data from a table having an input inside the mat-cell?

angular-material

angular

mat-table-exporter