动态数据表组件，使用Angular，不显示数据

如何解决动态数据表组件，使用Angular，不显示数据

我目前正在学习 Angular。 我正在创建一个可以在整个应用中重复使用的表格组件。

我可以设置列和分页信息。显示正确。

我的问题是我无法将数据显示在表格上。

你能帮我找出我在这里做错了什么吗？

这是我使用该组件的方式。

<app-data-table [tableDataSource] ="tableDataSrc" 
  [tableColumns]="tableCols"
  [pageSize]= "pageSize"
  [pageSizes] = "pageSizes"
  [totalPages]="totalItems">
</app-data-table>

这是 data-table-component.html

<table mat-table [dataSource]="tableDataSrc" class="mat-elevation-z8">
    <ng-container *ngFor="let col of tableCols">
      <ng-container matColumnDef="{{ col }}">
        <th mat-header-cell *matHeaderCellDef> {{ col | titlecase }} </th>
        <td mat-cell *matCellDef="let profile"> {{profile[col]}} </td>
      </ng-container>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="tableCols"></tr>
    <tr mat-row *matRowDef="let row; columns: tableCols;"></tr>
</table>

这里是 data-table-component.ts

import { Component,Input,OnInit,ViewChild } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
import { MatPaginator } from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';

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

  // input data source
  tableDataSrc : any;
  @Input('tableDataSource') tableData: {}[];

  // input columns
  @Input('tableColumns') tableCols: string[] = [];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  
  // input for pagination
  @Input('page') page = 1;
  @Input('count') count = 0;
  @Input('pageSize') pageSize = 10;
  @Input('pageSizes') pageSizes = [10,25,50,100,150];
  @Input('totalPages') totalItems : number;

  constructor() { }

  ngOnInit(): void {
    console.log("table data: " + this.tableData);
    
    this.tableDataSrc = new MatTableDataSource(this.tableData);
    this.tableDataSrc.paginator = this.paginator;
  }

  refresh() {

  }

  onPaginate(pageEvent: PageEvent)  {
    this.page = pageEvent.pageIndex;
    this.pageSize = pageEvent.pageSize;
    this.refresh();
  }
}

感谢您的投入。

解决方法

我想我解决了这个问题。

在我的 data-table-component.ts 上

我改变了这一行

// input data source
tableDataSrc : any;
@Input('tableDataSource') tableData: {}[];

到这一行

@Input('tableDataSource') tableDataSource : any;