要从JSON数组中获取数据并在Angular Material表格中显示,可以按照以下步骤进行操作:
@angular/material
和@angular/cdk
依赖项:npm install --save @angular/material @angular/cdk
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
@NgModule({
imports: [
MatTableModule,
MatPaginatorModule,
MatSortModule,
// 其他导入的模块...
],
// 其他配置...
})
export class AppModule { }
[
{ "name": "John", "age": 25 },
{ "name": "Jane", "age": 30 },
// 其他数据...
]
可以创建一个Person
类来表示每个对象:
export class Person {
name: string;
age: number;
}
import { Component, OnInit } from '@angular/core';
import { Person } from './person.model';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
dataSource: Person[] = [];
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('your-json-array-url').subscribe(data => {
this.dataSource = data;
});
}
}
在这个示例中,假设使用了HttpClient
来获取JSON数据。确保将HttpClientModule
导入到项目的AppModule
中。
来显示数据:
Name
{{ person.name }}
Age
{{ person.age }}
在这个示例中,通过matColumnDef
定义了两列,分别是"name"和"age"。然后使用*matHeaderCellDef
和*matCellDef
指令来定义表头单元格和表格单元格。
displayedColumns
数组,用于指定要显示的列:export class TableComponent {
displayedColumns: string[] = ['name', 'age'];
// 其他代码...
}
这是一个简单的示例,你可以根据你的需求进行扩展和自定义。