在Angular 9.1.0中,如果“mat-table”无法从GET Rest API加载数据源,可能是由于以下原因:
缺少必要的依赖项:确保您的项目中已安装并正确导入了“@angular/material”和“@angular/cdk”依赖项。
未正确注入HttpClient:在您的组件中确保已正确注入HttpClient,并使用它来发出GET请求。您可以将HttpClient注入到构造函数中,并使用它来获取数据。
订阅数据:在发出GET请求后,您需要订阅Observable以获取数据。您可以使用subscribe方法来订阅Observable,并在成功获取数据时执行所需的操作。
下面是一个示例解决方法的代码示例:
在您的组件中,首先导入所需的依赖项和服务:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
dataSource: any[]; // 数据源数组
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.getData(); // 在组件初始化时获取数据
}
getData() {
this.http.get('https://your-rest-api-url.com/data') // 替换为您的REST API URL
.subscribe((data: any[]) => {
this.dataSource = data; // 将获取的数据赋值给数据源数组
});
}
}
在您的模板中,使用“mat-table”来显示数据源:
Name
{{element.name}}
确保替换代码中的URL为您的实际REST API URL,并根据您的数据结构和列定义进行适当的更改。
这样,您就可以使用“mat-table”从GET Rest API加载数据源了。