可重复使用的角材料垫表

Posted 2023-02-22

【中文标题】可重复使用的角材料垫表

【英文标题】：reusable Angular Material mat-table

【发布时间】：2020-11-08 07:39:39

【问题描述】：

我有以下 Angular Material mat-table 用于列出员工。我还有其他表格需要转换为相同的样式和结构。如何组件化此 Employee 表以供重用？使用像 Material 这样的组件库的重点是重用常用组件，我无法理解如何轻松重用此表。

<table mat-table matSort [dataSource]="employeeDisplayList" class="mat-elevation-z8 table">

  <ng-container matColumnDef="selected">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element; let i = index"
      [ngClass]="'dependent': element.relationship !== 'Primary'">
      <input type="checkbox" id="enrollEmployee- i " name="enrollEmployee">
      <label for="enrollEmployee- i "></label>
    </td>
</ng-container>

<!-- Employee Name Column -->
<ng-container matColumnDef="employeeName">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Employee Name </th>
  <td mat-cell *matCellDef="let element" 
    [ngClass]="'dependent': element.relationship !== 'Primary'"> element.employeeName </td>
</ng-container>

<!-- Relationship Column -->
<ng-container matColumnDef="relationship">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Relationship </th>
  <td mat-cell *matCellDef="let element"
    [ngClass]="'dependent': element.relationship !== 'Primary'"> element.relationship </td>
</ng-container>

<!-- Medical Column -->
<ng-container matColumnDef="medical">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Medical </th>
  <td mat-cell *matCellDef="let element"
    [ngClass]="'dependent': element.relationship !== 'Primary'"> element.medical </td>
</ng-container>

<!-- Plan Name Column -->
<ng-container matColumnDef="planName">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Plan Name </th>
  <td mat-cell *matCellDef="let element"
    [ngClass]="'dependent': element.relationship !== 'Primary'"> element.planName </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

TS：

  displayedColumns: string[] = ['selected', 'employeeName', 'relationship', 'medical', 'planName'];
  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() 
    this.employeeList = this.enrollmentService.getEmployees();
    this.employeeDisplayList = new MatTableDataSource(this.employeeList);
    this.employeeDisplayList.sort = this.sort;
  

【参考方案1】：

第一步是“参数化”您的表格。为此，您可以使用对象数组和辅助变量

你提供了一些线索，但我可以想象你可以有，例如

//an array like
columnSchema=[
   title:"Employed Name",column:"employeeName"
   title:"Relationship ",column:"relationship
   ...
]
//two variables
columnCompare="relationship"
valueCompare="Primary"
//your displayColumns is realional with columSchema
displayColumns=["selected",...this.columSchema.map(x=>x.column)]
//and use datasource as data source

然后你可以像这样创建你的表

<table mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8 table">
   <!--the "selected is fixed for all the tables-->
  <ng-container matColumnDef="selected">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element; let i = index"
      [ngClass]="element[columnCompare]==valueCompare?'dependent':null">
      <input type="checkbox" id="enrollEmployee- i " name="enrollEmployee">
      <label for="enrollEmployee- i "></label>
    </td>
   </ng-container>
   <!--the rest columns use the columnSchema-->
   <ng-container *ngFor="let column of columnSchema" [matColumnDef]="column.column">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>column.title</th>
      <td mat-cell *matCellDef="let element" 
           [ngClass]="element[columnCompare]==valueCompare?'dependent':null"> 
           element[column.column]
      </td>
    </ng-container>
  ...
</table>

好吧，我们现在需要在组件的@Input 中转换我们的变量，因为 displayColumns 取决于“columnSchema”使用一个设置器

displayColumns;
_columnSchema;
@Input() dataSource
@Input() columnCompare
@Input() valueCompare
@Input() set columnSchema(value)

    this._columnsSchema=value
    this.displayColumns=["selected",...value.map(x=>x.column)]
  

get columnSchema()

     return this._columnSchema

好吧，创建一个组件并使用like

<myComponent 
   [dataSource]="employeeDisplayList"
   [columnSchema]="columnSchema"
   [columnCompare]="'relationship'"
   [valueCompare]="'Primary'">
</myComponent>

你可以做的事情还有很多，但我希望这对你有一些帮助

【讨论】：

谢谢！这确实帮助我朝着正确的方向前进。很高兴看到有人在一个似乎不受欢迎的问题上提供一些有价值的东西。