angular ts 表格_2019-1-17 Angular Material --- table

使用说需要导入的模块：

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

-"myDataArray"是从ts 文件传过来的数据，通过[dataSource]绑定到table

触发更新表格的渲染行调用方法 renderRows()

Advanced data sources

...

2. 定义一个列模板,

Name // 定义列表头 {{user.name}} //定义每行数据要渲染的属性

3. 定义行模板

1 , 在组件里创建一个变量，该变量包含要渲染的列项目(column list )

columnsToDisplay = ['userName', 'age']; 被渲染的列哪怕只有一项也要写成数组形式

2 , add mat-header-row and mat-row to mat-table and provide your column list as inputs.

3 ,