Угловая таблица материалов с объектом в качестве источника данных

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-файле вы должны добавить шаблон для таблицы и столбцов таблицы, как показано ниже:

<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 вам нужно сделать три вещи:

• определить имена столбцов, которые вы хотите отобразить (онидолжен совпадать с matColumnDef в DOM-файле)
• Ввести ваш источник данных в таблицу матов
• вызвать 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;
}