问题描述:在使用Angular Material的Mat-table组件时,从REST API获取的数据未能正确显示在表格中。
解决方法:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
getData(): Observable {
return this.http.get('https://api.example.com/data');
}
}
import { Component, OnInit } from '@angular/core';
import { DataService } from 'path/to/data.service';
@Component({
selector: 'app-table-component',
templateUrl: './table-component.component.html',
styleUrls: ['./table-component.component.css']
})
export class TableComponentComponent implements OnInit {
dataSource: any;
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.getData().subscribe(data => {
this.dataSource = data;
});
}
}
Name
{{ element.name }}
Email
{{ element.email }}
以上代码示例中,我们首先创建了一个名为DataService的数据服务,用于从REST API获取数据。然后,在TableComponentComponent组件中导入数据服务,并在ngOnInit生命周期钩子中调用getData方法来获取数据。最后,我们在HTML模板中使用Mat-table组件来显示数据。
确保在使用Mat-table组件时,正确设置了数据源(dataSource)和列定义(column definitions),以确保数据能正确地显示在表格中。