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”使用了setter

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>

您还可以做很多事情，但是我希望这对您有所帮助

可重复使用的角材料垫台

1 个答案: