时间戳

首页 > 解决方案 > 在 Angular 7 中为 Angular 材料表设置自定义数据源

javascript - 在 Angular 7 中为 Angular 材料表设置自定义数据源

问题描述

PS：我是 Angular 和 JS 的新手。

在我的新 angular 7 项目中，我有一个材料数据表组件。从 REST API 进行GET调用后，我可以填充所需对象的数组。这一切都发生在组件的ngOnInit方法中。（不包括代码，因为它无关紧要）。

我的问题是，如何将数组绑定到dataSource数据表的？在数据表的 HTML 中，我在顶部有：

<table mat-table [dataSource]="dataSource" matSort aria-label="Elements">
  ....
  ....
  <td mat-cell *matCellDef="let row">{{row.id}}</td>
</...>

在..DataSource.ts文件中，我有一些属性和connect,disconnect方法定义如下：

export class TestTableItem {
 id: number; 
}

export class TestTableDataSource extends DataSource<TestTableItem> {
paginator: MatPaginator;
sort: MatSort;

  constructor(private TestArray: any[]) {
   super();
  }

  connect(collections: CollectionViewer): Observable<TestTableItem[]> {
    return observableOf<TestTableItem[]>(this.TestArray);
  }

  disconnect() {}

在 中component.ts，我dataSource声明了属性，如上所述，我在ngOnInit()方法中填充数组，如下所示：

 private myCollection: TestTableItem[] = [];

 dataSource = new MatTableDataSource(this.myCollection);

 ngOnInit() {

  ...
  //adding new item to myCollection
 }

那么，最后，我如何将数组绑定到表？我试图在方法中传递new TestTableDataSource(this.myCollection);给this.dataSource, ngOnInIt，但它失败了dataSource，因为它TestTableDataSource是不同类型的。

不确定我是否能够正确地说出这些话，但我希望读者能明白我的意思。任何指示将不胜感激。

更新

如果我定义dataSource为TestTableDataSource，如下：

dataSource: TestTableDataSource;

代码工作正常。但是，该表仍然是空的。有趣的是，进行此更改还会删除表的所有列。表格变得完全空白。为什么即使myCollection不是空的也会发生？

标签： javascriptangulartypescriptangular-material

解决方案

无需扩展DataSource将从 REST API 返回的数组绑定到 mat 表的数据源。

我的建议是：

  • 完全删除TestTableDataSource类
  • 当你的 api中ngOnInit的数组被填充时（让我们称之为它myArr），你只需要从这个数组初始化表的数据源，就像这样this.dataSource = new MatTableDataSource(myArr);

在此之后，您的数组内容将呈现为 mat 表的数据。

推荐阅读