為什么排序不適用於包裹在手風琴中的材料表？

Question

根據要求，我有兩個手風琴，每個手風琴都有一個獨立的桌子。 通過單擊第一個手風琴，它會打開並調用 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;
  }

Answer 1

你有一個獨特的手風琴在時間打開，所以唯一的方法是“給時間”給 Angular 在 asig 排序之前顯示 data.table。

不是使用 ngAfterViewInit，而是在您獲取數據時需要分配

我想你有一個 function showData

showData(id:number, isExpanded:bool)
{
    this.myservice.getData(id).subscribe(res=>{
       this.dataSources=new MatDataTable(res)
       //enclosed in a setTimeout()
       setTimeout(()=>{
          this.dataSource.sort=this.matSort
       })
    })
}

這是因為 ViewChild 獲得了找到的“第一個”MatSort。

另一種查看方式是使用 ViewChildren 而不是 ViewChild

@ViewChildren(MatSort) matSorts: QueryList<MatSort>;

然后，始終都是“可見的”（不在 *ngIf 下）可以確保排在首位的 Querylist 元素是第一個表的第一個數學排序。

所以首先我們需要“刪除” *ngIf

<table mat-table *ngIf="dataSource.data.length > 0"... matSort>
  ..
</table>

並定義一個數據源數組

dataSource:MatDataSource[]=[]

所以，變得像

<table mat-table *ngIf="dataSource[i].data.length > 0"... matSort>.. </table>

<div [style.visibility]="dataSource[i].data.length <= 0:'collapse':null">
  <table mat-table ... matSort>
    ..
  </table>
</div>

現在，當給 dataSource.sort 賦值時

我們可以做的

this.usersData.forEach((_,index:number)=>{
    this.dataSource[index]new MatDataSource() //a matDataSource empty
    this.dataSource[index].sort=this.matSorts.find((x:any,index:number)=>index==i)
})

然后給我們的 MathDataSource 賦值

showData(id:number, isExpanded:bool)
{
    const index=this.usersData.findIndex(x=>x.id==id);

    this.myservice.getData(id).subscribe(res=>{
       this.dataSources[index].data=res
    })
}