角形物料分拣台不工作

Question

I'm using Angular Material and I generate the tables inside a for loop in the template. I want to add sorting and pagination to these generated tables but what I tried is not working. I have a list of groups and each group has its items which is a table and I want to be able to sort by price, quantity, sales .

groups: any[] = [
    {
      name: 'Group 1',
      items: [
        { name: 'Product 1', price: 20, quantity: 33, sales: 11 },
        { name: 'Product 2', price: 10, quantity: 43, sales: 11 },
        { name: 'Product 3', price: 23, quantity: 63, sales: 11 },
      ],
    },
    {
      name: 'Group 2',
      items: [
        { name: 'Product 2', price: 40, quantity: 33, sales: 11 },
        { name: 'Product 4', price: 10, quantity: 143, sales: 211 },
        { name: 'Product 61', price: 63, quantity: 63, sales: 151 },
      ],
    },
    {
      name: 'Group 20',
      items: [
        { name: 'Product 22', price: 40, quantity: 33, sales: 11 },
        { name: 'Product 14', price: 10, quantity: 143, sales: 211 },
      ],
    },
  ];

And On HTML I have these:

<div *ngFor="let group of groups">
  <p>{{ group.name }}</p>
  <div class="mat-elevation-z8">
    <table [dataSource]="group.items" mat-table matSort>
      <ng-container matColumnDef="name">
        <th *matHeaderCellDef mat-header-cell>Name</th>
        <td *matCellDef="let element" mat-cell>{{ element.name }}</td>
      </ng-container>
      <ng-container matColumnDef="price">
        <th *matHeaderCellDef mat-sort-header mat-header-cell>Price</th>
        <td *matCellDef="let element" mat-cell>{{ element.price }}</td>
      </ng-container>
      <ng-container matColumnDef="quantity">
        <th *matHeaderCellDef mat-sort-header mat-header-cell>Quantity</th>
        <td *matCellDef="let element" mat-cell>{{ element.quantity }}</td>
      </ng-container>
      <ng-container matColumnDef="sales">
        <th *matHeaderCellDef mat-sort-header mat-header-cell>Sales</th>
        <td *matCellDef="let element" mat-cell>{{ element.sales }}</td>
      </ng-container>
      <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
      <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
    </table>
  </div>
</div>

Can someone help me please I'm stuck?

Check in this stackblitz

Answer 1

To include sorting in the code for the Material table, you will need to do the following:

Import the material sort module:

import { MatSortModule } from '@angular/material/sort';

In addition, the following types are required to be imported within each component that uses Material tables and column sorting:

import { MatSort } from '@angular/material/sort';

To be able to use table sorting within the HTML template, declare an instance(s) of MatSort as a child within our component source as shown:

@ViewChild(MatSort) sort1: MatSort;
@ViewChild(MatSort) sort2: MatSort;
@ViewChild(MatSort) sort3: MatSort;

Declare data source as an array:

dataSource: any[] = [
  new MatTableDataSource(this.groups[0].items),
  new MatTableDataSource(this.groups[1].items),
  new MatTableDataSource(this.groups[2].items),
];

After our component is initialized, the sort for our data source is initialized with the following excerpt:

ngAfterViewInit()
{
  this.dataSource[0].sort = this.sort1;
  this.dataSource[1].sort = this.sort2;
  this.dataSource[2].sort = this.sort3;    
}

Add an additional id property into each of the group structures:

eg:

{
  id: 0,
  name: 'Group 1',
  ..
}, 

The data source attribute in the HTML table element can be declared as:

<table [dataSource]="dataSource[group.id]" mat-table matSort>

Once the above changes are applied the table columns will have basic ascending and descending sorting.

For a more general case I would recommend moving your table HTML into a component which can be properly re-used within the above loop with the data source as a parameter and the sorting objects with their own instance.