角形物料分揀台不工作

Question

我正在使用 Angular Material，並在模板的 for 循環內生成表格。 我想為這些生成的表格添加排序和分頁，但我嘗試的方法不起作用。 我有一個組列表，每個組都有它的項目，這是一個表格，我希望能夠按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 },
      ],
    },
  ];

在 HTML 上，我有這些：

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

有人可以幫我嗎，我被卡住了？

簽入這個stackblitz

Answer 1

要在 Material 表的代碼中包含排序，您需要執行以下操作：

導入物料分類模塊：

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

此外，每個使用材料表和列排序的組件中都需要導入以下類型：

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

為了能夠在 HTML 模板中使用表格排序，請在我們的組件源中聲明一個MatSort實例作為子項，如下所示：

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

將數據源聲明為數組：

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

在我們的組件初始化后，我們的數據源的排序將使用以下摘錄進行初始化：

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

在每個組結構中添加一個額外的 id 屬性：

例如：

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

HTML table 元素中的數據源屬性可以聲明為：

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

應用上述更改后，表格列將具有基本的升序和降序排序。

對於更一般的情況，我建議將您的表格 HTML 移動到一個組件中，該組件可以在上述循環中正確重用，數據源作為參數，排序對象具有自己的實例。