如何正确设置角度表数据源以从API中提取数据

Question

使用有角度的材料示意图生成表格将为您提供一个包含datasource.ts文件的表格组件。在这种情况下，要显示的数据是硬编码的。

我已经替换了这个文件中的接口以匹配我的数据，通过使用导入的ApiService，我可以从我的api中提取数据。

数据源.ts

export interface TestTableItem {
CompanyName: string;
Sites: number;
BaseUnits: number;
Sensors: number;
}

export class TestTableDataSource extends DataSource<TestTableItem> {
data: TestTableItem[] = [];
paginator: MatPaginator | undefined;
sort: MatSort | undefined;      
constructor(private service: ApiService) {
super();        
this.service.getCompanies().subscribe((response) => {
this.data = response;
});
}

我遇到的问题在component.ts文件中。在构造数据源类时，这需要一个参数

组件.ts

constructor() {
this.dataSource = new TestTableDataSource();
}

应为1个参数，但得到0。未提供"service"的参数

如何确保数据源可以访问apiservice，而不需要将其作为参数？

Answer 1

我已经测试过了，它对我来说更糟：(

您必须添加以下步骤：

在应用程序模块.ts中

1. 添加此导入

import { Injector, NgModule } from '@angular/core';

2. 导出注射器

export let AppInjector: Injector;

3. 在AppModule构造函数中初始化它：

export class AppModule {
constructor(private injector: Injector) {
AppInjector = this.injector;
}
}

在数据源.ts中

1. 导入AppInjector

import { AppInjector } from '../../app.module';

2. 在构造函数中初始化它

constructor() {
const myService = AppInjector.get(ApiService);
}

我希望我帮过你