angular - 角材料数据表 无数据
问题描述
我正在尝试 Angular 5 材料数据表。
它显示标题,但表中未显示任何数据。
我已经从一个站点复制了这段代码。他们显示数据正在显示。我检查了所有内容,代码没有区别。
测试组件.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: 'john@gmail.com'},
{position: 1, firstName: 'Mike', lastName: 'Hussey', email: 'mike@gmail.com'},
{position: 1, firstName: 'Ricky', lastName: 'Hans', email: 'ricky@gmail.com'},
{position: 1, firstName: 'Martin', lastName: 'Kos', email: 'martin@gmail.com'},
{position: 1, firstName: 'Tom', lastName: 'Paisa', email: 'tom@gmail.com'}
];
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>
解决方案
推荐阅读
- angular - 如何在 Typescript Ad-hoc 中扩展类型
- reactjs - 重置令牌参数导致 404
- java - Android:Firebase 动态链接始终会转到 Playstore URL,即使已安装应用程序也是如此
- python - Windows 上的 Python pip - 命令错误“cl.exe”
- python - pysftp.Connection.get IOError:b35d5d74-ecb1-4a41-a9ed-5dde9b15960d
- flutter - 使用 Flutter 和 Dart,这是实现这个 Future 的最佳方式吗?
- sql-server - 为什么我的总数没有正确显示,我该如何解决?
- sql - 如何在 Ruby on Rails 迁移中修复具有“间隙”的列的顺序
- php - 使用所有可能的属性从字符串中完全删除 img 标签
- machine-learning - 用我自己的训练示例训练 spaCy 现有的词性标注器