角度材质表，对象作为数据源

Question

我的组件看起来像这样：

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之前将其放入数组中吗？还是有办法循环它们？谢谢。

Answer 1

为了使用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>

在你的component.ts文件中，你需要做三件事：

• 定义要显示的列名称（它们应与DOM文件中的matColumnDef匹配）
• 将您的数据源引入mat表
• 在数据表上调用renderRows()

请记住，这将自动遍历您的数据源数组，并将填充您不需要任何*ngFor的表。只需将您的数据源保存为Array的Objects。

import { MatTableDataSource, MatTable, MatSort } from '@angular/material';
import { Component, ViewChild, OnInit }
export class DocumentListComponent implements OnInit {
  @ViewChild('dataTable') dataTable: MatTable<any>;
  dataSource: MatTableDataSource<ItemModel> ;
  columnsToDisplay = ['id', 'name'];
  ngOnInit() {
      let dataSamples: ItemModel[] ;
      //init your list with ItemModel Objects (can be manual or come from server etc) And put it in data source
      this.dataSource = new MatTableDataSource<ItemModel>(dataSamples);
      if(this.dataSource){
            this.dataTable.renderRows();
      }
  }
}
export class ItemModel {
name: string;
id: number;
}