角材料数据表 无数据 [英] Angular Material Data Table No Data

问题描述

我正在尝试 angular 5 材料数据表.

I am trying angular 5 material data table.

它显示了标题，但表格中没有显示数据.

It is showing the headings but no data is showing in the table.

我从一个网站复制了这段代码.他们表明，数据正在显示.我检查了所有内容，代码没有区别.

I have copied this code from a site. On they showed that data is showing. I check everything and there is no difference in the code.

test.component.ts

import { Component, OnInit } from '@angular/core';
import {MatTableDataSource} from '@angular/material';

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

  displayedColumns = ['position', 'firstName', 'lastName', 'email'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  constructor() { }

  ngOnInit() {

  }

}

export interface Element {
  position: number;
  firstName: string;
  lastName: string;
  email: string;
}

const ELEMENT_DATA: Element[] = [
  {position: 1, firstName: 'John', lastName: 'Doe', email: '[e-mail]'},
  {position: 1, firstName: 'Mike', lastName: 'Hussey', email: '[e-mail]'},
  {position: 1, firstName: 'Ricky', lastName: 'Hans', email: '[e-mail]'},
  {position: 1, firstName: 'Martin', lastName: 'Kos', email: '[e-mail]'},
  {position: 1, firstName: 'Tom', lastName: 'Paisa', email: '[e-mail]'}
];

test.component.html

<mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="position">
          <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
          <mat-cell *matCellDef="let element">  </mat-cell>
        </ng-container>

        <ng-container matColumnDef="firstName">
          <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
          <mat-cell *matCellDef="let element">  </mat-cell>
        </ng-container>

        <ng-container matColumnDef="lastName">
          <mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
          <mat-cell *matCellDef="let element">  </mat-cell>
        </ng-container>

        <ng-container matColumnDef="email">
          <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
          <mat-cell *matCellDef="let element">  </mat-cell>
        </ng-container>

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

推荐答案

需要如下设置数据源，

 <mat-table #table [dataSource]="dataSource">

编辑

演示

这篇关于角材料数据表 无数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！