角度材质表，对象作为数据源
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了角度材质表，对象作为数据源相关的知识，希望对你有一定的参考价值。
我的组件看起来像这样：
import { Component, OnInit } from '@angular/core';
import { Member} from '../entities/Member';
import { SearchService } from './search.service';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss']})
export class SearchComponent implements OnInit {
members: Member[] = [];
constructor(private searchService: SearchService) { }
ngOnInit() {
this.searchService.getPartenaires().subscribe(
member=> {
this.members= member;
}
);
}
}
我还没弄明白如何使用ngFor在材质表上显示我的对象。 https://material.angular.io/components/table/overview上的示例总是使用数组作为DataSource。
我应该在将对象传递给HTML之前将其放入数组中吗？还是有办法循环它们？谢谢。
答案
为了使用Angular Material Table，你需要先将MatTableModule
中的import {MatTableModule} from '@angular/material/table';模块导入你的app.module.ts（如果你想使用MatSort等其他功能，你也必须包含它们。然后在你的DOM文件中你应该为你的表添加模板和表列如下：
<table #dataTable mat-table [dataSource]="dataSource">
<!-- COLUMN INFO -->
<!--ID Col -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let item"> {{item.id}} </td>
</ng-container>
<!--Name Col -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let item">{{item.name}} </td>
</ng-container>
<!-- ROW Info-->
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let rowData; columns: columnsToDisplay;"></tr>
</table>以上是关于角度材质表，对象作为数据源的主要内容，如果未能解决你的问题，请参考以下文章