角材料7-表 - 芒果文档

📌 相关文章

📜 角材料7-表

📅 最后修改于: 2020-10-28 04:55:12 🧑 作者: Mango

是一个角度指令，用于创建具有材料设计和样式的表。

在本章中，我们将展示使用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}}

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'];
}

结果

验证结果。

细节

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