Angular Material 7 表

The <垫表> ，一个角度指令，用于创建具有材料设计和样式的表格。

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

<table mat-table [dataSource] = "dataSource" class = "mat-elevation-z8"> 
    <ng-container matColumnDef = "name">
        <th mat-header-cell *matHeaderCellDef> Dessert (100g)</th>
        <td mat-cell *matCellDef = "let element"> {{element.name}} </td>
    </ng-container>
    <ng-container matColumnDef = "calories">
        <th mat-header-cell *matHeaderCellDef>Calories</th>
        <td mat-cell *matCellDef = "let element"> {{element.calories}} </td>
    </ng-container>
    <ng-container matColumnDef = "fat">
        <th mat-header-cell *matHeaderCellDef>Fat (g)</th>
        <td mat-cell *matCellDef = "let element"> {{element.fat}} </td>
    </ng-container>
    <ng-container matColumnDef = "carbs">
        <th mat-header-cell *matHeaderCellDef>Carbs (g)</th>
        <td mat-cell *matCellDef = "let element"> {{element.carbs}} </td>
    </ng-container>
    <ng-container matColumnDef = "protein">
        <th mat-header-cell *matHeaderCellDef>Protein (g)</th>
     <td mat-cell *matCellDef = "let element"> {{element.protein}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
    <tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
</table>

以下是修改后的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'];
}

Result

验证结果。

Details

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