📜  角材料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}}

以下是修改后的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。