html - 我怎样才能有嵌套的 mat-table sortables？

Question

再见，

我正在使用 Angular 8，我需要一个包含可扩展行的主表，并且我需要查看每一行的详细信息。

我的实际问题是排序只适用于父表而不适用于子表。

这是我的 HTML 代码:

<table mat-table [dataSource]="dataSource" multiTemplateDataRows matSort #sorter1="MatSort">
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> ID </th>
        <td mat-cell *matCellDef="let element"> {{ element.id }} </td>
    </ng-container>

    <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let element" [attr.colspan]="2">
            <div>
                <table mat-table [dataSource]="dataSource2" matSort #innerSorts="MatSort">
                    <ng-container matColumnDef="id">
                        <th mat-header-cell *matHeaderCellDef> ID </th>
                        <td mat-cell *matCellDef="let element"> {{ element.id }} </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="['id']"></tr>
                    <tr mat-row *matRowDef="let element; columns: ['id'];"></tr>
                </table>
            </div>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="['id']"></tr>
    <tr mat-row *matRowDef="let element; columns: ['id'];"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"
        (click)="clickRow(element)">
    </tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']"></tr>
</table>

这是我的 TypeScript 代码:

imports ...

@Component({
selector: 'my-nested-tables',
styleUrls: ['my-nested-tables.css'],
templateUrl: 'my-nested-tables.html',
animations: [
    trigger('detailExpand', [
    state('collapsed', style({height: '0px', minHeight: '0'})),
    state('expanded', style({height: '*'})),
    transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
],
})
export class MyNestedTablesComponent {
    @Input() element: Array<Element>;
    @Input() element2: Array<Element>;

    dataSource1: MatTableDataSource<Element>(this.element);
    dataSource2: MatTableDataSource<Element>(this.element2);
    expandedElement: Element;

    @ViewChild("sorter1", {static:true}) sorter1: MatSort;
    @ViewChildren("innerTables") tables: QueryList<MatTable<Element>>
    @ViewChildren("innerSorts") innerSorts: QueryList<MatSort>;

    constructor(private cd: ChangeDetectorRef) { }

    ngOnInit() {
        this.dataSource.sort = sorter1;

    }

    ngOnChanges(change: SimpleChanges) {
        this.dataSource1.data = this.element;
        this.dataSource2.data = this.element2;
    }

    clickRow(element: Element) : void {
        this.expandedElement = this.expandedElement === element ? null : element;
        this.onLoadMyNestedElement.emit(this.expandedElement.id); // This is a event that update the element2 property (HTTP request).
        this.cd.detectChanges();
        this.tables.forEach((table, index) => (table.dataSource as MatTableDataSource<Element>).sort = this.innerSorts.toArray()[index]);
    }
}

export class Element {
    public id: number;
}

你能帮帮我吗？

感谢米勒!

Answer 1

Material 表可能很复杂且难以连接，尤其是在排序和过滤方面。

有助于简化事情的方法是将内部表分解为一个单独的组件，并将引用添加到父表中。

这还具有可单独测试的好处。尝试以下设置(我无法验证它是否有效，但这将是一个好的开始)

ma​​in-table.component.ts

<inner-table [data]="element.data"></inner-table>

inner-table.component.ts

import { MatTableDataSource, MatSort } from '@angular/material';
import { Component, Input, ViewChild } from '@angular/core';

@Component({
  selector: "inner-table",
  template: `
    <table mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
        <td mat-cell *matCellDef="let element">{{ element.id }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['id']"></tr>
      <tr mat-row *matRowDef="let element; columns: ['id']"></tr>
    </table>
  `
})
export class InnerTableComponent {
  @Input()
  set data(newData: []) {
    this.dataSource.data = newData;
  }

  dataSource: MatTableDataSource<Element>;

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

  ngOnInit() {
    this.dataSource = new MatTableDataSource();
    this.dataSource.sort = this.sort;
  }
}

我还制作了自己的角度 Material 表，名为 ngx-auto-table要帮助处理数据表，请查看它可能对您有所帮助。