Question

我尝试通过多次排序为角物料表创建包装。因此，我想为默认的table（这是我的模板）编写一个包装器组件：

<div>
    <table mat-table [dataSource]="tableData.dataSource" matMultiSort (matSortChange)="_emitParentEvent">
        <ng-content></ng-content>
        <tr mat-header-row *matHeaderRowDef="tableData.displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: tableData.displayedColumns;"></tr>
    </table>
    <mat-paginator [pageSize]="tableData.pageSize" [pageIndex]="tableData.pageIndex"
        [pageSizeOptions]="tableData.pageSizeOptions" [length]="tableData.size ? tableData.size : 0"
        (page)="tableData.onPagnationEvent($event)">
    </mat-paginator>

</div>

这是组件的代码：

@Component({
  selector: 'mat-multi-sort-table',
  templateUrl: './mat-multi-sort-table.component.html',
  styleUrls: ['./mat-multi-sort-table.component.scss']
})
export class MatMultiSortTableComponent implements OnInit {

  @Input() tableData: TableData<any>;
  @Output() matMulitSortChange: EventEmitter<MutliSortItem[]> = new EventEmitter<MutliSortItem[]>();

  @ViewChild(MatMultiSort, { static: false }) sort: MatMultiSort;

  constructor() { }

  ngOnInit() {
    this.tableData.dataSource.sort = this.sort;
  }

  _emitParentEvent() {
    const tmpItmes = [];
    for (let i = 0;*emphasized text* i < this.sort.actives.length; i++) {
      tmpItmes.push(new MutliSortItem(this.sort.actives[i], this.sort.directions[i]));
    }
    this.matMulitSortChange.emit(Object.assign([], tmpItmes));
  }
}

否，当我将某些内容传递给组件时，如下所示；

<mat-multi-sort-table [tableData]="table" (matMulitSortChange)="console.log($event)">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="id"> ID </th>
      <td mat-cell *matCellDef="let row"> {{row.id}} </td>
    </ng-container>

    <ng-container matColumnDef="progress">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="progress"> Progress </th>
      <td mat-cell *matCellDef="let row"> {{row.progress}}% </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="name"> Name </th>
      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
    </ng-container>

    <ng-container matColumnDef="color">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="color"> Color </th>
      <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </td>



    </ng-container>

    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef mat-multi-sort-header="date"> Date </th>
      <td mat-cell *matCellDef="let row"> {{row.date | date:'YYYY-MM-DD HH:mm'}} </td>
    </ng-container>

</mat-multi-sort-table>

我得到以下错误：ERROR Error: "Could not find column with id "id"我发现，发生该问题是因为表在初始化时需要其定义，而ng-content则不是这种情况。有没有解决此问题的方法？

Answer 1

您有一个关于角形材料github的示例：https://github.com/angular/components/tree/master/src/components-examples/material/table/table-wrapped。

您必须执行以下操作：

export class WrapperTable<T> implements AfterContentInit {
  @ContentChildren(MatHeaderRowDef) headerRowDefs: QueryList<MatHeaderRowDef>;
  @ContentChildren(MatRowDef) rowDefs: QueryList<MatRowDef<T>>;
  @ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;

  @ViewChild(MatTable, {static: true}) table: MatTable<T>;

  ngAfterContentInit() {
    this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));
    this.rowDefs.forEach(rowDef => this.table.addRowDef(rowDef));
    this.headerRowDefs.forEach(headerRowDef => this.table.addHeaderRowDef(headerRowDef));
  }
}

角度：垫表中的ng含量

1 个答案: