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上的示例始终使用数组作为数据源。

在将对象传递给HTML之前，应该将它们放入数组中吗？还是有办法遍历它们？谢谢。

Answer 1

要使用Angular Material Table，您需要先从MatTableModule导入import {MatTableModule} from '@angular/material/table';模块放入app.module.ts中（如果要使用其他功能，例如MatSort，则还必须包括它们。然后在DOM文件中，应为表和表列添加模板，如下所示：< / p>

<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;
}

以对象为数据源的角度材质表

1 个答案: