可重复使用的角材料垫表

Question

我有以下 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;
  }

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

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