1

我的tablelist组件是childcomponent. 我想制作一个 csv/pdf 文件，但不能。但是，使用singleComponet此代码可以工作。这背后有什么问题。我收到如下错误：

ERROR in src/app/table-list/table-list.component.html:7:38 - error TS2339: Property 'exporter' does not exist on type '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.

表格组件.html

<div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="SearchFilter">
    </mat-form-field>

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

  
  <div class="mat-elevation-z8" >
 
    <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>

  <mat-paginator  [pageSizeOptions]=[5,10,50,100,200]> </mat-paginator>
  </div>

表组件.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;
  }

}

有什么解决办法吗？

4

1 回答 1

1

以这种方式实现：

表格组件.html

table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matTableExporter> <table

<button mat-raised-button (click)="importAsXlsx()">DownloadAsExcel</button>

表格组件.ts

import { MatTableExporterDirective } from 'mat-table-exporter';

export class TableListComponent implements OnInit {
     
@ViewChild(MatTableExporterDirective) matTableExporter: MatTableExporterDirective;

importAsXlsx(){

this.matTableExporter.exportTable('xlsx', {fileName:'test', sheet: 'sheet_name'});

}

}
于 2020-11-19T06:59:12.427 回答