Angular CLI 材质表数据源答案

【问题标题】：Angular CLI Material Table DataSourceAngular CLI 材质表数据源
【发布时间】：2022-01-25 00:37:35
【问题描述】：

我有一个正在处理的编码项目，我使用 Angular CLI 来创建一个新的数据表。我在显示我的 API 数据时遇到了很多麻烦。

我终于设法让我的数据显示出来，但前提是我键入数据源，这反过来又破坏了我所有的分页和排序。

如果有人可以帮助我，我一直在尝试调试自己，但经过太多小时我只是在兜圈子。

API 服务

  getAllUsers(): Observable<any> {
    return this.http.get<any>('http://localhost:3000/users');
  }

数据源.ts

export class UserTableDataSource extends DataSource<UserTableItem> {
  data: UserTableItem[] = EXAMPLE_DATA;
  paginator: MatPaginator;
  sort: MatSort;


  constructor(private api: ApiService) {
    super()
    this.api.getUserAll().subscribe(result => this.data = result)
  }

组件.ts

export class UserTableComponent implements AfterViewInit, OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatTable) table: MatTable<UserTableItem>;
  dataSource: UserTableDataSource;
  dataTest;
  userId;
  allDem;

  constructor(private api: ApiService,  private route: ActivatedRoute){}

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['id', 'name', 'username', 'email', 'actions'];

  ngOnInit() {
    this.dataSource = new UserTableDataSource(this.api);
    console.log(this.dataSource)
  }

HTML 文件

  <table mat-table class="full-width-table" [dataSource]="dataSource.data"  matSort aria-label="Elements">

任何可以帮助我重构此代码以便我可以在 HTML 文件中没有dataSource.data 的情况下访问我的数据的人，我将不胜感激。

【问题讨论】：

标签： angular command-line-interface datasource

【解决方案1】：

为什么不通过这个设置数据源 this.dataSource = new MatTableDataSource(this.api);? 也许你可以试试这个

【讨论】：