- 使用说需要导入的模块：
app.module.ts （老天爷呀，一定要看API 里面的导入，API 里导入的才是Module , 刚开始以为下面的模块是要导入的，没导入这个一直报错，以为是版本低，升级也不起作用，想着仔细看API 找找什么问题，原来是...一把辛酸泪啊,之前用过其他的都成功啦，这一步是下意识完成的，后面用table 不知道怎么就想不起来这一步，一直报错，啊。。。）
import {MatTableModule} from '@angular/material/table';
.ts (根据overiew 对应类型 的代码导入)
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';
- 写 html
1. add <table mat-table>, and provide data
-"myDataArray"是从ts 文件传过来的数据，通过[dataSource]绑定到table
- 触发更新表格的渲染行调用方法 renderRows()
Advanced data sources
<table mat-table [dataSource]="myDataArray">
...
</table>
2. 定义一个列模板,
<ng-container matColumnDef="userName">
<th mat-header-cell *matHeaderCellDef> Name </th> // 定义列表头
<td mat-cell *matCellDef="let user"> {{user.name}} </td> //定义每行数据要渲染的属性
</ng-container>
3. 定义行模板
- 1 , 在组件里创建一个变量，该变量包含要渲染的列项目（column list ）
columnsToDisplay = ['userName', 'age']; 被渲染的列哪怕只有一项也要写成数组形式 - 2 , add
mat-header-row and mat-rowtomat-tableand provide yourcolumn list as inputs.
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
- 3 ,
