gpt4 book ai didi

angular - 如何从在 mat-cell 中有输入的表中导出数据?

转载 作者:行者123 更新时间:2023-12-05 03:40:33 25 4
gpt4 key购买 nike

我在 Angular Material 中有一个项目,我试图使用 MatTableExporter 模块将数据从表导出到 xlsx 文件。

我有列 IDNameactions(编辑和删除),但它只显示列 ID 和操作,名称列显示为空。

我的问题:因为 Name 列显示为空,我怎样才能显示数据?如何从 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 文件:

enter image description here

最佳答案

要从 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 种方式绑定(bind),用户对 input 字段中的名称所做的任何更改都将反射(reflect)在隐藏字段中,因此导出时的 XLS。

这是 a StackBlitz展示这个工作。只需更改一个(或多个)名称字段并点击“导出 excel”按钮,您应该得到:

enter image description here

关于angular - 如何从在 mat-cell 中有输入的表中导出数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68069027/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com