是否可以使用MatTable按选定行排序？
是否可以使用MatTable按选定行排序？
提问于 2019-09-19 22:48:13
我有一个实现Angular Material的documentation所指示的选择的MatTable
一切正常，选择完成，等等；但我在想是否可以应用某种排序，这样我就可以对DataSource排序，这样选定的行就会首先显示出来。
<table mat-table matSort [dataSource]="dataSourcePPC" class="w-100 table-bordered table-hover">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row" class="text-center">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selectionPPC.toggle(row) : null;"
[checked]="selectionPPC.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
<td mat-cell *matCellDef="let ppc">{{ ppcTypeModel[ppc.type] }}</td>
</ng-container>
...
<tr mat-header-row *matHeaderRowDef="displayedColumnsPPC"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsPPC;" [ngClass]="{'selected': selectionPPC.isSelected(row)}" (click)="selectionPPC.toggle(row)"></tr>
</table>我正在研究sortingDataAccesor函数，但我真的不明白它是如何工作的；任何关于这方面的帮助我都很感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-19 23:14:21
你可以做这样的事情。
这就是checkbox的工作方式。
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
</mat-checkbox>
<div mat-sort-header>
<mat-icon>ac_unit</mat-icon>
</div>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
</mat-checkbox>
</td>
</ng-container>在打字时你可以写。
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'select': return this.selection.selected.includes(item);
case 'nestedObject': return item.parentObject.childObject;
default: return item[property];
}
};基本上，因为在将数据传递给sortingDataAccessor时，我的matColumnDef是'select‘，所以您需要检查它是否与'select’匹配。一旦你知道它匹配'select‘，你就可以检查你的项目(即当前行)是否包含在所选项目的数组( selection.selected数组)中。
selection = new SelectionModel(true, []); // you already should have this since you have select.我还介绍了如何对嵌套对象进行排序。如果你需要的话。如果你有嵌套的对象，你需要在switchcase中编写类似case 'nestedObject‘的代码。“nestedObject”只是您在表中对列的任何名称。
我在我的项目中检查了它，它工作正常。
祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58013683
复制相关文章
相似问题
腾讯云开发者
