要使用Angular Material扩展表格,你需要遵循以下步骤:
npm install @angular/material
app.module.ts
文件中添加以下代码:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
BrowserAnimationsModule,
MatTableModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
文件中添加以下代码:import { Component } from '@angular/core';
export interface UserData {
id: string;
name: string;
progress: string;
color: string;
}
const ELEMENT_DATA: UserData[] = [
{id: '1', name: 'John Doe', progress: '80%', color: 'green'},
{id: '2', name: 'Jane Smith', progress: '50%', color: 'blue'},
{id: '3', name: 'Bob Johnson', progress: '70%', color: 'yellow'},
];
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
dataSource = ELEMENT_DATA;
}
app.component.html
文件中添加以下代码:
ID
{{element.id}}
Name
{{element.name}}
Progress
{{element.progress}}
Color
{{element.color}}
通过这些步骤,你就可以在Angular应用中使用Angular Material扩展表格了。在这个示例中,我们创建了一个包含id
,name
,progress
和color
列的表格,并使用dataSource
变量来提供数据。