使用 Mat-Table-Exporter 时找不到属性“exporter”

Question

我正在创建一个报告页面，该页面根据用户输入的日期范围显示报告。该报告采用表格形式，我想将其导出为 excel 和 csv 文件。 我正在使用角度版本 9 并尝试使用 [mat-table-exporter] (https://www.npmjs.com/package/mat-table-exporter) 将表数据导出到 xls、csv。该指令对不同的导出类型使用不同的导出器服务。 但是我在 html 文件中收到了这个错误，上面写着“无法读取未定义的属性 'exportTable'”。你能帮我解决这个问题吗？

<h3 align="center">Payment Gateway Report</h3>
<div class="container-fluid" style="font-size: 18px;margin-top: 20px;">
    <div class="row">
        <div class="col-lg-3 col-xs-6 col-sm-6 col-md-6">
            <ejs-daterangepicker placeholder="From and To Date"format='dd-MM-yyyy' [max]='maxDate' [(ngModel)]="date"></ejs-daterangepicker>
        </div>
        <div class=" col-lg-3 col-xs-6 col-sm-6 col-md-6">
            <button class="btn customBtn" (click)="getTableData()">Get Report</button>
        </div>
        <div class=" col-lg-3 col-xs-6 col-sm-6 col-md-6" *ngIf="showTable">
            <button mat-button(click)="exporter.exportTable('csv')">Download</button>
        </div>
    </div>
</div>

<div style="overflow: auto;" *ngIf="showTable">

    <table mat-table [dataSource]="dataSource" class="tableCss table-striped" style="width: 100%;"#exporter="matTableExporter" matSort>
    
        <ng-container matColumnDef="superMerchantName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> superMerchantName </th>
            <td mat-cell *matCellDef="let element">{{element.superMerchantName}} </td>
        </ng-container>
        <ng-container matColumnDef="branchName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> branchName </th>
            <td mat-cell *matCellDef="let element"> {{element.branchName}}</td>
        </ng-container>
        
        <ng-container matColumnDef="branchLoginId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header align="center"> branchLoginId </th>
            <td mat-cell *matCellDef="let element"> {{element.branchLoginId}} </td>
        </ng-container>
        
    
        <ng-container matColumnDef="merchantUserId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> merchantUserId </th>
            <td mat-cell *matCellDef="let element"> {{element.merchantUserId}} </td>
        </ng-container>
    
        <ng-container matColumnDef="merchantName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> merchantName</th>
            <td mat-cell *matCellDef="let element"> {{element.merchantName}} </td>
        </ng-container>
    
        <ng-container matColumnDef="customerName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> customerName </th>
            <td mat-cell *matCellDef="let element"> {{element.customerName}} </td>
        </ng-container>
        
        
        <ng-container matColumnDef="customerMobileNo">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> customerMobileNo </th>
            <td mat-cell *matCellDef="let element"> {{element.customerMobileNo}} </td>
        </ng-container>

        <ng-container matColumnDef="loanId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> loanId </th>
            <td mat-cell *matCellDef="let element"> {{element.loanId}} </td>
        </ng-container>
        <ng-container matColumnDef="paymentMode">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> paymentMode </th>
            <td mat-cell *matCellDef="let element"> {{element.paymentMode}} </td>
        </ng-container>

       
        
        <ng-container matColumnDef="region">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> region </th>
            <td mat-cell *matCellDef="let element"> {{element.region}} </td>
        </ng-container>
        <ng-container matColumnDef="bankName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> bankName </th>
            <td mat-cell *matCellDef="let element"> {{element.bankName}} </td>
        </ng-container>
        <ng-container matColumnDef="cardScheme">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> cardScheme </th>
            <td mat-cell *matCellDef="let element"> {{element.cardScheme}} </td>
        </ng-container>
        <ng-container matColumnDef="cardNumber">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> cardNumber </th>
            <td mat-cell *matCellDef="let element"> {{element.cardNumber}} </td>
        </ng-container>
        <ng-container matColumnDef="deviceImei">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> deviceImei </th>
            <td mat-cell *matCellDef="let element"> {{element.deviceImei}} </td>
        </ng-container>
        <ng-container matColumnDef="latitude">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> latitude </th>
            <td mat-cell *matCellDef="let element"> {{element.latitude}} </td>
        </ng-container>
        <ng-container matColumnDef="longitude">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> longitude </th>
            <td mat-cell *matCellDef="let element"> {{element.longitude}} </td>
        </ng-container>
        <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> status </th>
            <td mat-cell *matCellDef="let element"> {{element.status}} </td>
        </ng-container>
        <ng-container matColumnDef="requestedTimestamp">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> requestedTimestamp </th>
            <td mat-cell *matCellDef="let element"> {{element.requestedTimestamp}} </td>
        </ng-container>
        <ng-container matColumnDef="responseTimestamp">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> responseTimestamp </th>
            <td mat-cell *matCellDef="let element"> {{element.responseTimestamp}} </td>
        </ng-container>
        <ng-container matColumnDef="merchantId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> merchantId </th>
            <td mat-cell *matCellDef="let element"> {{element.merchantId}} </td>
        </ng-container>
        <ng-container matColumnDef="remarks">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> remarks </th>
            <td mat-cell *matCellDef="let element"> {{element.remarks}} </td>
        </ng-container>
        <ng-container matColumnDef="stan">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> stan </th>
            <td mat-cell *matCellDef="let element"> {{element.stan}} </td>
        </ng-container>
        <ng-container matColumnDef="statusCode">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> statusCode </th>
            <td mat-cell *matCellDef="let element"> {{element.statusCode}} </td>
        </ng-container>
      

        
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns:   getDisplayedColumns();"></tr>
    
    </table>
    </div>

Answer 1

这与您调用模板引用exporter 的方式有关。

模板引用在其模板范围之外是不可访问的。 通过将表格包装在结构指令 (*ngIf) 中，您碰巧将模板变量 #exporter 限制为只能在带有 *ngIf 的 div 内访问。

您可以使用 CSS 来显示/隐藏您的表格，而不是使用 ngIf。我不会推荐它。 解决问题的最简单和最好的方法就是将按钮放在同一个 ng-template 上下文中。

例如，这应该可以工作：

<h3 align="center">Payment Gateway Report</h3>

<div style="overflow: auto;" *ngIf="showTable">

    <table mat-table [dataSource]="dataSource" class="tableCss table-striped" style="width: 100%;"#exporter="matTableExporter" matSort>

        <ng-container matColumnDef="superMerchantName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> superMerchantName </th>
            <td mat-cell *matCellDef="let element">{{element.superMerchantName}} </td>
        </ng-container>
        <ng-container matColumnDef="branchName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> branchName </th>
            <td mat-cell *matCellDef="let element"> {{element.branchName}}</td>
        </ng-container>

        <ng-container matColumnDef="branchLoginId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header align="center"> branchLoginId </th>
            <td mat-cell *matCellDef="let element"> {{element.branchLoginId}} </td>
        </ng-container>


        <ng-container matColumnDef="merchantUserId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> merchantUserId </th>
            <td mat-cell *matCellDef="let element"> {{element.merchantUserId}} </td>
        </ng-container>

        <ng-container matColumnDef="merchantName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> merchantName</th>
            <td mat-cell *matCellDef="let element"> {{element.merchantName}} </td>
        </ng-container>

        <ng-container matColumnDef="customerName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> customerName </th>
            <td mat-cell *matCellDef="let element"> {{element.customerName}} </td>
        </ng-container>


        <ng-container matColumnDef="customerMobileNo">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> customerMobileNo </th>
            <td mat-cell *matCellDef="let element"> {{element.customerMobileNo}} </td>
        </ng-container>

        <ng-container matColumnDef="loanId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> loanId </th>
            <td mat-cell *matCellDef="let element"> {{element.loanId}} </td>
        </ng-container>
        <ng-container matColumnDef="paymentMode">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> paymentMode </th>
            <td mat-cell *matCellDef="let element"> {{element.paymentMode}} </td>
        </ng-container>



        <ng-container matColumnDef="region">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> region </th>
            <td mat-cell *matCellDef="let element"> {{element.region}} </td>
        </ng-container>
        <ng-container matColumnDef="bankName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> bankName </th>
            <td mat-cell *matCellDef="let element"> {{element.bankName}} </td>
        </ng-container>
        <ng-container matColumnDef="cardScheme">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> cardScheme </th>
            <td mat-cell *matCellDef="let element"> {{element.cardScheme}} </td>
        </ng-container>
        <ng-container matColumnDef="cardNumber">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> cardNumber </th>
            <td mat-cell *matCellDef="let element"> {{element.cardNumber}} </td>
        </ng-container>
        <ng-container matColumnDef="deviceImei">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> deviceImei </th>
            <td mat-cell *matCellDef="let element"> {{element.deviceImei}} </td>
        </ng-container>
        <ng-container matColumnDef="latitude">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> latitude </th>
            <td mat-cell *matCellDef="let element"> {{element.latitude}} </td>
        </ng-container>
        <ng-container matColumnDef="longitude">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> longitude </th>
            <td mat-cell *matCellDef="let element"> {{element.longitude}} </td>
        </ng-container>
        <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> status </th>
            <td mat-cell *matCellDef="let element"> {{element.status}} </td>
        </ng-container>
        <ng-container matColumnDef="requestedTimestamp">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> requestedTimestamp </th>
            <td mat-cell *matCellDef="let element"> {{element.requestedTimestamp}} </td>
        </ng-container>
        <ng-container matColumnDef="responseTimestamp">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> responseTimestamp </th>
            <td mat-cell *matCellDef="let element"> {{element.responseTimestamp}} </td>
        </ng-container>
        <ng-container matColumnDef="merchantId">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> merchantId </th>
            <td mat-cell *matCellDef="let element"> {{element.merchantId}} </td>
        </ng-container>
        <ng-container matColumnDef="remarks">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> remarks </th>
            <td mat-cell *matCellDef="let element"> {{element.remarks}} </td>
        </ng-container>
        <ng-container matColumnDef="stan">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> stan </th>
            <td mat-cell *matCellDef="let element"> {{element.stan}} </td>
        </ng-container>
        <ng-container matColumnDef="statusCode">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> statusCode </th>
            <td mat-cell *matCellDef="let element"> {{element.statusCode}} </td>
        </ng-container>



        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns:   getDisplayedColumns();"></tr>

    </table>
    <div class="container-fluid" style="font-size: 18px;margin-top: 20px;">
        <div class="row">
            <div class="col-lg-3 col-xs-6 col-sm-6 col-md-6">
                <ejs-daterangepicker placeholder="From and To Date"format='dd-MM-yyyy' [max]='maxDate' [(ngModel)]="date"></ejs-daterangepicker>
            </div>
            <div class=" col-lg-3 col-xs-6 col-sm-6 col-md-6">
                <button class="btn customBtn" (click)="getTableData()">Get Report</button>
            </div>
            <div class=" col-lg-3 col-xs-6 col-sm-6 col-md-6" *ngIf="showTable">
                <button mat-button(click)="exporter.exportTable('csv')">Download</button>
            </div>
        </div>
    </div>

    </div>

编辑：

您忘记在 mat-table 中添加 matTableExporter 指令选择器。应该是这样的：

<table mat-table [dataSource]="dataSource" class="tableCss table-striped" style="width: 100%;" matTableExporter #exporter="matTableExporter" matSort>