英文:
Only make selected columns as sortable instead of all columns in angular material table
问题
我正在使用Angular Material表格，以下是代码：
<mat-table [dataSource]="dataSource" matSort><!-- 表格列 --><ng-container *ngFor="let column of displayedColumns; let i = index" [matColumnDef]="column"><th mat-header-cell *matHeaderCellDef [mat-sort-header]="sortableColumns.includes(column) ? column : ''" style="flex: 1">{{ headerLabels[i] }}</th><td mat-cell *matCellDef="let element" style="flex: 1"><!-- 对特定列应用数字格式化 --><ng-container *ngIf="shouldApplyNumberFormatting(column)">{{ element[column] | number }}</ng-container><!-- 显示其他列内容 --><ng-container *ngIf="!shouldApplyNumberFormatting(column)">{{ element[column] }}</ng-container></td></ng-container><!-- 表格行 --><tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr><tr mat-row *matRowDef="let row; columns: displayedColumns; let even = even" [class.mat-table-alternate-row]="even"></tr></mat-table>
目前，它在所有列上都显示排序选项，但我希望只在某些列上显示排序选项，因此我决定声明一个用于列名称的数组，名为sortableColumns，其中包含需要排序选项的列，并应用以下代码：
[mat-sort-header]="sortableColumns.includes(column) ? column : ''"
但仍然在所有列上显示排序选项。
以下是.ts文件中的排序绑定代码：
constructor(private dashboardService: DashboardService, private decimalPipe: DecimalPipe) { }@ViewChild(MatPaginator) paginator!: MatPaginator;@ViewChild(MatSort) sort!: MatSort;ngAfterViewInit(): void {if (this.dataSource) {this.dataSource.paginator = this.paginator;this.dataSource.sort = this.sort;}}ngOnInit(): void {this.dashboardService.getDashboardData().subscribe((data: DashboardData[]) => {this.dataSource = new MatTableDataSource<DashboardData>(data);this.dataSource.paginator = this.paginator;this.dataSource.sort = this.sort;});}
希望这对你有所帮助！
英文:
I am using angular material table and here is code as follow :
<mat-table [dataSource]="dataSource" matSort ><!-- Table columns --><ng-container *ngFor="let column of displayedColumns; let i = index" [matColumnDef]="column"><th mat-header-cell *matHeaderCellDef [mat-sort-header]="sortableColumns.includes(column) ? column : ''" style="flex: 1">{{ headerLabels[i] }}</th><td mat-cell *matCellDef="let element" style="flex: 1"><!-- Apply number formatting to specific columns --><ng-container *ngIf="shouldApplyNumberFormatting(column)">{{ element[column] | number }}</ng-container><!-- Display other columns as is --><ng-container *ngIf="!shouldApplyNumberFormatting(column)">{{ element[column] }}</ng-container></td></ng-container><!-- Table rows --><tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr><tr mat-row *matRowDef="let row; columns: displayedColumns; let even = even" [class.mat-table-alternate-row]="even"></tr></mat-table>
Its currently show sort option on all the columns but I want that on certain columns so I decided to declare an array for the column name as sortableColumns which I need the sorting option and apply
[mat-sort-header]="sortableColumns.includes(column) ? column : ''"
but still its shows sorting option on all columns.
here is the .ts file code where sort is bind
constructor(private dashboardService: DashboardService,private decimalPipe: DecimalPipe) { }@ViewChild(MatPaginator) paginator!: MatPaginator;@ViewChild(MatSort) sort!: MatSort;ngAfterViewInit(): void {if (this.dataSource) {this.dataSource.paginator = this.paginator;this.dataSource.sort = this.sort;}}ngOnInit(): void {this.dashboardService.getDashboardData().subscribe((data: DashboardData[]) => {this.dataSource = new MatTableDataSource<DashboardData>(data);this.dataSource.paginator = this.paginator;this.dataSource.sort = this.sort;});}
答案1
得分: 1
在mat-sort-header中有一个属性"disabled"，请参阅文档。
所以，我想你需要像这样使用：
<th mat-header-cell *matHeaderCellDef[mat-sort-header]="column"[disabled]="!sortableColumns.includes(column)">...</th>
注意：你不能在.html中动态应用一个指令。如果是属性、类或样式，你可以将其绑定到"null"，如果条件不成功，但这对于指令不起作用。
<!-- 仅当是属性时 --><div [attr.NameAtribute]="(condition) ? true : null"></div><!-- 或者，我们可以使用 --><div [class.myClass]="condition ? true : null"></div><!-- 这个不起作用 --><div [mat-sort-header]="(condition) ? true : null"></div>
英文:
You have a property "disabled" in mat-sort-header, see the docs
So, I imagine you need use some like
<th mat-header-cell *matHeaderCellDef[mat-sort-header]="column"[disabled]="!sortableColumns.includes(column)">...</th>
NOTE: you can not apply dinamically a directive in the .html. If is an attribute or class or style you can binding to "null" if the condition is not sucefully, but this not work with a directive.
<!--only if is an attribute--><div [attr.NameAtribute]="(condicion)?true:null"></div><!--or, we can use--><div [class.myClass]="condition?true:null"></div><!--this NOT work--><div [mat-sort-header]="(condition)?true:null"></div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论