如何正确设置 angular table 数据源以从 API 中提取数据

Question

使用 angular material 原理图生成 table 会为您提供包含 datasource.ts 文件的 table 组件。在这里，要显示的数据是硬编码的。

我已替换此文件中的接口以匹配我的数据，并且使用我导入的 ApiService 我可以从我的 api.

中提取数据

datasource.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 文件中。在构建数据源 class 时，需要一个参数

component.ts

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

需要 1 个参数，但得到 0 个。 未提供 'service' 的参数。

如何确保 api 服务可由数据源访问而不需要将其作为参数？

Answer 1

我已经测试过了，它对我有用:)

您必须添加以下步骤：

在你的app.module.ts

添加这个导入

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

导出喷油器

export let AppInjector: Injector;

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

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

在你的datasource.ts

导入 AppInjector

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

在你的构造函数中初始化它

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

希望对你有所帮助

如何正确设置 angular table 数据源以从 API 中提取数据

How to properly set up angular table datasource to pull data from API

angular

angular-material

angular-material-table