Не удается найти свойство "экспортер" при использовании Mat-Table-Exporter

Question

Я работаю над страницей отчета, которая отображает отчет на основе диапазона дат, введенного пользователем. Отчет находится в табличной форме, и я хочу экспортировать его в файлы excel и csv. Я использую angular версии 9 и пытаюсь экспортировать данные таблицы в xls, csv с помощью [mat-table-exporter] (https://www.npmjs.com/package/mat-table-exporter). Директива использует разные службы экспортера для разных типов экспорта. Но я получаю эту ошибку в файле html, в котором говорится, что «не удается прочитать свойство 'exportTable' of undefined». Не могли бы вы помочь мне решить проблему?

<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 только внутри этого div с помощью * ngIf.

Вы можете использовать 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>

EDIT:

Вы забыли добавить селектор директивы matTableExporter в таблицу матов. Должно получиться так:

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