创建可重复使用的 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 。