为 Angular 7 中的 Angular 材质表设置自定义数据源

Question

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.dataSourcengOnInItdataSourceTestTableDataSource

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

更新

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

dataSource: TestTableDataSource;

该代码运行良好。然而，桌子仍然是空的。有趣的是，进行此更改还会删除表中的所有列。表格变得完全空白。为什么即使myCollection不为空也会发生这种情况？

Answer 1

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

我的建议是：

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

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