以下是一个使用Angular 6创建数据表格的简单示例:
npm install @angular/material @angular/cdk @angular/animations
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
imports: [
BrowserAnimationsModule,
MatTableModule
]
import { Component } from '@angular/core';
export interface Data {
name: string;
age: number;
city: string;
}
const ELEMENT_DATA: Data[] = [
{ name: 'John', age: 25, city: 'New York' },
{ name: 'Jane', age: 30, city: 'London' },
{ name: 'Mike', age: 35, city: 'Paris' },
];
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
displayedColumns: string[] = ['name', 'age', 'city'];
dataSource = ELEMENT_DATA;
}
Name
{{element.name}}
Age
{{element.age}}
City
{{element.city}}
这是一个基本的Angular 6数据表格示例,您可以根据自己的需求进行自定义和扩展。