Свойство «экспортер» не существует для типа «TableListComponent»

Question

Мой компонент списка таблиц является дочерним компонентом. Я хочу создать файл csv / pdf, но не могу .. Но singleComp onet этот код работает .. В чем заключается проблема. Ошибка, такая как ОШИБКА в src / app / table-list / table-list.component. html: 7: 38 - ошибка TS2339: свойство 'exporter' не существует для типа 'TableListComponent'.

7   <button mat-raised-button (click)="exporter.exportTable('csv')">Csv</button>
                                       ~~~~~~~~

  src/app/table-list/table-list.component.ts:11:16
    11   templateUrl: './table-list.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component TableListComponent.








enter code here

tablecomp onet. html

Csv

<mat-table   #table matTableExporter  *ngIf="dataSource" [dataSource]="dataSource" #exporter="matTableExporter"  >

  <ng-container  *ngFor =" let column of displaycolumns;let i = index"  [matColumnDef]="column">
    <mat-header-cell class="head"  *cdkHeaderCellDef md-sort-header >{{column}} </mat-header-cell>
    <mat-cell  class="colum" *cdkCellDef="let row"> {{row[column]}} </mat-cell> 
  </ng-container>

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

tableComp onet .ts

import { MyService } from './../services/my.service';
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { FieldConfig } from '../interfaces/FieldConfig.interfaces';
import { MatTableExporterModule, MatTableExporterDirective } from 'mat-table-exporter';

@Component({
  selector: 'app-table-list',
  templateUrl: './table-list.component.html',
  styleUrls: ['./table-list.component.css']
})
export class TableListComponent implements OnInit {

  constructor(private demoS: MyService) {}

  field: FieldConfig;

  // @ViewChild('#exporter') matTableExporter: MatTableExporterDirective;
  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: false}) sort: MatSort;
  @Input() baseurl: string;

  public  config: any;
  private Pdata: any ;
  public displaycolumns: any;

  dataSource: MatTableDataSource<any>;

  public ngOnInit(): void {
    this.getConfigCall();
    this.getDataCall();

  }


  private getDataCall(): void {
    this.demoS.getData(this.baseurl).subscribe(
      (res) => {
        this.Pdata = res;
        this.dataSource = new MatTableDataSource(this.Pdata);
        this.dataSource.sort = this.sort;

        this.dataSource.paginator = this.paginator;

        console.log(this.dataSource);
      });
  }

  private getConfigCall(): void {
    this.demoS.getConfig(this.baseurl).subscribe((res) => {
       this.config = res ;
       this.displaycolumns = this.config
          .filter((item) => {

        if (item.label) {
            if (item.name !== 'Crud-Buttons') {
              if (item.list) {

                 if (item.list.hidden === true) {return false; } else { return true; }
              } else if (!item.list) {
                return true; } else { return false; }

            }
        }

        if (!item.label) {
          item.label = item.name;
          // console.log(item);
          if (item.list.hidden === true) {return false; }
          return true;
        }


            })
          .map(item => item.label);
      //  console.log(this.displaycolumns);

    });

  }

  public applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
  }

}

любое решение ????