角材料排序嵌套表

Question

角材料排序嵌套表不起作用。内部的嵌套分页工作正常，但是当我尝试对嵌套表进行排序时，注意到正在发生。我尝试使用 https://stackblitz.com/edit/angular-nested-mat-table?file=app%2Ftable-expandable-rows-example.ts 文章，但它对我不起作用。 image example

<div class="mat-elevation-z8">
    <table mat-table [dataSource]="branchSource" #outerSort="matSort" multiTemplateDataRows matSort>

        <ng-container matColumnDef="add">
            <th class="table-icon" mat-header-cell *matHeaderCellDef> </th>
            <td class="table-icon" mat-cell *matCellDef="let row">
                <button title="Add new sub substance" mat-icon-button aria-label="Add"
                    (click)="openSubSubstance('new')">
                    <mat-icon>add_circle_outline</mat-icon>
                </button>
            </td>
        </ng-container>

        <ng-container matColumnDef="casNumber">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> CAS Number </th>
            <td mat-cell *matCellDef="let row"> {{row.casNumber}} </td>
        </ng-container>

        <ng-container matColumnDef="ecNumber">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> EC Number </th>
            <td mat-cell *matCellDef="let row"> {{row.ecNumber}} </td>
        </ng-container>

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

        <ng-container matColumnDef="edit">
            <th class="table-icon" mat-header-cell *matHeaderCellDef> </th>
            <td class="table-icon" mat-cell *matCellDef="let row">
                <button title="Edit master substance" mat-icon-button aria-label="Edit"
                    (click)="openMasterSubstance(row.casNumber)">
                    <mat-icon>edit</mat-icon>
                </button>
            </td>
        </ng-container>

        <ng-container matColumnDef="expandedDetail">
            <td mat-cell *matCellDef="let row" [attr.colspan]="displayedColumns.length">
                <div class="example-element-detail"
                    [@detailExpand]="row === expandedElement ? 'expanded' : 'collapsed'">

                    <table #innerTables mat-table #innerSort="matSort" matSort [dataSource]="row.sub"
                        class="mat-elevation-z8">

                        <ng-container matColumnDef="reachNumber">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header> Reach Number </th>
                            <td mat-cell *matCellDef="let sub"> {{sub.reachNumberSufix }} </td>
                        </ng-container>

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

                        <ng-container matColumnDef="classification">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header> Classification </th>
                            <td mat-cell *matCellDef="let sub"> {{sub.classifications }} </td>
                        </ng-container>

                        <ng-container matColumnDef="hazardStatments">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header> Hazard Statments </th>
                            <td mat-cell *matCellDef="let sub"> {{sub.hazardStatements}} </td>
                        </ng-container>

                        <ng-container matColumnDef="m-factors">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header> M-Factor Acute / M-Factor Chronic
                            </th>
                            <td mat-cell *matCellDef="let sub"> {{sub.mFactorAcute}} / {{sub.mFactorChronic}} </td>
                        </ng-container>

                        <ng-container matColumnDef="edit">
                            <th class="table-icon" mat-header-cell *matHeaderCellDef> </th>
                            <td class="table-icon" mat-cell *matCellDef="let sub">
                                <button title="Edit substance" mat-icon-button aria-label="Edit"
                                    (click)="openSubSubstance(row.casNumber)">
                                    <mat-icon>edit</mat-icon>
                                </button>
                            </td>
                        </ng-container>

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

                    <mat-paginator #innerPaginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

                </div>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

        <tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
            [class.example-expanded-row]="expandedElement === element" (click)="toggleRow(element)"></tr>

        <tr mat-row *matRowDef="let element; columns: ['expandedDetail']" class="example-detail-row">
        </tr>

        <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell" [attr.colspan]="displayedColumns.length">No data matching the filter "{{input.value}}"
            </td>
        </tr>

    </table>

    <mat-paginator #masterPagination [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>



@Component({
  selector: 'app-home',
  styleUrls: ['./home.component.css'],
  templateUrl: './home.component.html',
  animations: [
    trigger('detailExpand', [
      state('collapsed, void', style({ height: '0px', minHeight: '0'})),
        state('expanded', style({ height: '*' })),
        transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
        transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))

    ]),
  ],
})


export class HomeComponent implements OnInit {

  @ViewChild('outerSort', { static: true }) outerSort: MatSort;
  @ViewChildren('innerSort') innerSort: QueryList<MatSort>;
  @ViewChildren('innerTables') innerTables: QueryList<MatTable<any>>;
  @ViewChild('masterPagination', { static: true }) branchPaginator: MatPaginator;
  @ViewChildren('innerPaginator') innerPaginator: QueryList<MatPaginator>;
 
  branchSource: MatTableDataSource<any>;

  displayedColumns: string[] = ['add', 'casNumber', 'ecNumber', 'genericName', 'edit'];
  displayedSubColumns: string[] = ['reachNumber', 'name', 'classification', 'hazardStatments', 'm-factors','edit'];
  
  expandedElement: any | null;;

  subSubstances: any[] = [];

  data: any[] = [];

  constructor(public router: Router, private cd: ChangeDetectorRef) {
  }

  ngOnInit(): void {
    this.data = DATA;
    this.data.forEach(branch => {
        this.subSubstances = [...this.subSubstances, {...branch, sub: new MatTableDataSource(branch.substances)}];
    });

    this.branchSource = new MatTableDataSource(this.subSubstances);
    this.branchSource.sort = this.outerSort;
    this.branchSource.paginator = this.branchPaginator;
  }
    
  openMasterSubstance(isNew: string): void {
    this.router.navigate(['master-substance', isNew]);
  }

  openSubSubstance(isNew: string): void {
    this.router.navigate(['sub-substance', isNew]);
  }

  toggleRow(element: any) {
    this.expandedElement = this.expandedElement  === element ? null : element;
    this.cd.detectChanges();
    
    this.innerTables.forEach((table, index) => {
        (table.dataSource as MatTableDataSource<any>).paginator = this.innerPaginator.toArray()[index];
        (table.dataSource as MatTableDataSource<any>).sort = this.innerSort.toArray()[index];
      });
  }
}

*只有在第一行“Reach Number”才有意义被排序。