问题描述
角材料排序嵌套表不起作用。内部的嵌套分页工作正常,但是当我尝试对嵌套表进行排序时,注意到正在发生。我尝试使用 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,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',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”才有意义被排序。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)