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.dataSource传递给ngOnInIt，但是由于dataSource和TestTableDataSource是不同类型，所以失败了。

不确定我是否能够正确输入文字，但希望读者能理解我的意思。任何迹象将不胜感激。

更新

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

dataSource: TestTableDataSource;

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

Answer 1

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

我建议是：

完全删除TestTableDataSource类
在ngOnInit上，当您的api数组被填充时（我们称其为myArr），您只需从该数组初始化表的数据源，就像这样this.dataSource = new MatTableDataSource(myArr);

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

Answer 2

如果您不需要分页，排序或过滤，那么@leopal的答案就可以了。如果您需要需要这些功能，请查看 Angular Material 博客条目： Angular Material Data Table: A Complete Example (Server Pagination, Filtering, Sorting)。

它非常完整，解释得很好-太长了，甚至无法覆盖这里的重点。我看到的一个空白是在应用过滤器后如何更新分页器的总长度...

Answer 3

您要创建不同的垫表

您可以使用@ViewChild指令获取对HTML中呈现的Mat-Table的引用

@ViewChild('matTable') matTable: MatTable;

ngAfterViewInit() {
  this.matTable.data = yourData;
}

或者您可以在HTML中使用mat-table dataSource输入：

<table mat-table [dataSource]="yourDataSource">
 // Your HTML
</table

然后changeDetection将为您完成其余工作

在Angular 7中为Angular Material Table设置自定义数据源

3 个答案: