創建可重復使用的 Angular 具有分頁、過濾和排序功能的材料表

Question

我在我的項目中使用 Angular 材料。 我將在我的項目中使用很多表，並且由於該項目的高度復雜性，我想使用可重用的表以避免代碼重復。 我試圖創建一個沒有過濾和分頁的可重用表：

表.component.html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container
      *ngFor="let disCol of tableColumns let colIndex = index;"
      matColumnDef="{{disCol.columnDef}}"
    >
      <th mat-header-cell *matHeaderCellDef>
        {{ disCol.header }}
      </th>
  
      <td mat-cell *matCellDef="let element">
        <span *ngIf="!disCol.isLink; else link">
          {{ disCol.cell(element) }}
        </span>
  
        <ng-template #link>
          <a [routerLink]="[disCol.url]">
            {{ disCol.cell(element) }}
          </a>
        </ng-template>
      </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

表.component.ts

export class TableComponent implements OnInit {
  @Input()
  tableColumns: Array<TableColumn> = [];

  @Input()
  tableData: Array<any> = [];

  displayedColumns: Array<string> = [];
  dataSource: MatTableDataSource<any> = new MatTableDataSource();

  constructor() {}

  ngOnInit(): void {
    this.displayedColumns = this.tableColumns.map((c) => c.columnDef);
    this.dataSource = new MatTableDataSource(this.tableData);
  }
}

表列.ts

export interface TableColumn {
    columnDef: string;
    header: string;
    cell: Function;
    isLink?: boolean;
    url?: string;
}

我想添加服務器端分頁、過濾和排序。 我的 API（基於 EF Core 的 ASP.NET Core API）可以采用pageNumber和pageSize兩個參數來提供所需的數據。

[HttpGet]
        public async Task<IActionResult> GetEquipmentFilterCategory(int pageNumber, int pageCapacity, string categoryName)
        {
            int skip = (pageNumber - 1) * pageCapacity;

            var list = await _sqlServerContext.Equipments.Where(x => x.EquipmentCategory!.CategoryName == categoryName)
                .OrderByDescending(x => x.EquipmentId)
                .Skip(skip).Take(pageCapacity)
                .Include(x => x.CostCenter)
                .Include(x => x.EquipmentCategory)
                .Include(x => x.equipmentType)
                .ToListAsync();

            if (list.Count > 0)
            {
                return Ok(list);
            }
            return NoContent();
        }

        [HttpGet]
        public async Task<IActionResult> GetTotalEquipmentCount()
        {
            var totalCount = await _sqlServerContext.Equipments.CountAsync();
            return Ok(totalCount);
        }

如何向這個可重用的 MatTable 添加服務器端分頁、過濾和排序？

Answer 1

您正在尋找的內容已經在 Angular 材料表的示例中作為Wrapper Table ( https://material.angular.io/components/table/examples#table-wrapped )。 您可以以此為起點，以您想要的方式實現它。 您現在需要做的就是為MatPaginator添加ContentChild並在構造函數中注入MatSort 。