根据要求，我有两个可折叠面板，每个面板都有一个独立的表。单击第一个可折叠面板，它会打开并调用API，从后端获取数据，并呈现在第一个可折叠面板中的表上。使用此表，排序工作正常，但当我打开第二个可折叠面板时，排序不工作。

HTML代码：

<mat-accordion multi="false" [togglePosition]="'before'">
    <ng-container *ngFor="let item of usersData; let i=index;last as last">
    <mat-expansion-panel class="mt-2" #isExpanded>
        <mat-expansion-panel-header (click)="showData(item.id, isExpanded.expanded)">
            <table>
                <tr>
                    <th class="col-4 px-2">Number</th>
                    <th class="col-4">Name</th>
                    <th class="col-4">Date</th>
                    <td> <button mat-icon-button matTooltip="Delete">
                            <mat-icon class="mat-icon mat-primary">delete</mat-icon>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td class="col-4 px-2"><span matTooltip="{{item.number}}">{{item.number}}</span></td>
                    <td class="col-4"><span matTooltip="{{item.name}}">{{item.name}}</span></td>
                    <td class="col-4"><span matTooltip="{{item.createdAt | date: 'yyyy-MM-dd'}}">{{item.createdAt | date: 'yyyy-MM-dd'}}</span></td>
                    <td></td>
                </tr>
            </table>
        </mat-expansion-panel-header>
        <div class="m-2" fxLayout="row wrap" fxLayoutGap="20px">
            <div class="bh-table-title bh-table mt-2 scroll">
                <table mat-table *ngIf="dataSource.data.length > 0" [dataSource]="dataSource" matSort #MatSorteds matSortStart="desc">
                    <ng-container matColumnDef="number">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Number</th>
                        <td mat-cell *matCellDef="let element" matTooltip="{{element.number}}">
                            <button class="link" (click)="navigate(element)">{{element.number}}</button>
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="Name">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name</th>
                        <td mat-cell *matCellDef="let element" matTooltip="{{element.Name}}">
                            {{element.name}}</td>
                    </ng-container>
                    <ng-container matColumnDef="createdAt">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Date</th>
                        <td mat-cell *matCellDef="let element" matTooltip="{{element.createdAt| date: 'yyyy-MM-dd'}}">
                            {{element.createdAt | date: 'yyyy-MM-dd'}}</td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="columnsToDisplay;sticky: true" mat-sort></tr>
                    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
                </table>
            </div>
        </div>
        <div class="no-records-panel" *ngIf="dataSource.data.length === 0">No Records found</div>
    </mat-expansion-panel>
    </ng-container>
</mat-accordion>

组件代码：

@ViewChild(MatSort) matSort!: MatSort;

 ngAfterViewInit(): void {
    this.dataSource.data = this.data;
    this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.matSort;
  }