Angular Material 7 - Table

Angular Material 7 - Table - 从简单和简单的步骤学习角度材料7，从基本到高级概念，包括概述，环境设置，自动完成，复选框，日期选择器，表单域，输入，单选按钮，选择，滑块菜单，侧导航，工具栏，卡，分隔线，扩展面板，网格列表，列表，步进，选项卡，树，按钮，切换按钮，徽章，芯片，图标，进度微调，进度栏，涟漪，SnackBar，工具提示，Paginator ，SortHeader，表

< mat-table> ，一个Angular Directives，用于创建具有材质设计和样式的表格.

在本章中，我们将展示使用Angular Material显示表所需的配置.

以下是修改后的模块描述符的内容 app.module.ts .

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import {BrowserAnimationsModule} from '@angular/platform-browser/animations';import {MatTableModule} from '@angular/material'import {FormsModule, ReactiveFormsModule} from '@angular/forms';@NgModule({   declarations: [      AppComponent   ],   imports: [      BrowserModule,      BrowserAnimationsModule,      MatTableModule,      FormsModule,      ReactiveFormsModule   ],   providers: [],   bootstrap: [AppComponent]})export class AppModule { }

以下是修改过的HTML主机文件的内容 app.component.html .

           Dessert (100g)       {{element.name}}             Calories       {{element.calories}}             Fat (g)       {{element.fat}}             Carbs (g)       {{element.carbs}}             Protein (g)      {{element.protein}}

以下是修改过的ts文件的内容 app.component.css .

table {   width: 100%;}

以下是修改过的ts文件的内容 app.component.ts .

import {Component, Injectable} from '@angular/core';import {Sort} from '@angular/material';export interface Food {   calories: number;   carbs: number;   fat: number;   name: string;   protein: number;}@Component({   selector: 'app-root',   templateUrl: 'app.component.html',   styleUrls: ['app.component.css']})export class AppComponent {    dataSource: Food[] = [      {name: 'Yogurt', calories: 159, fat: 6, carbs: 24, protein: 4},      {name: 'Sandwich', calories: 237, fat: 9, carbs: 37, protein: 4},      {name: 'Eclairs', calories: 262, fat: 16, carbs: 24, protein: 6},      {name: 'Cupcakes', calories: 305, fat: 4, carbs: 67, protein: 4},      {name: 'Gingerbreads', calories: 356, fat: 16, carbs: 49, protein: 4},   ];   displayedColumns: string[] = ['name', 'calories', 'fat', 'carbs','protein'];}

结果

验证结果.

Table

详细信息

在这里，我们创建了一个表.添加mat-Table并使用mat-row和mat-header-row处理tr和th.