angular - Angular Material - 对 mat-table 的数据进行排序
问题描述
我正在使用角度材料。如何对数据进行排序?
HTML 文件
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef mat-sort-header> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.assetId}} </mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let element"> {{element.assetName}} </td>
</ng-container>
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.cpuName}} </td>
</ng-container>
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.hddName}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
.ts 文件
import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import {MatSort} from '@angular/material/sort';
import { AddAssetService } from '../shared/add-asset.service';
export interface Element {
assetId: any;
assetName: any;
cpuName: any;
hddName: any;
}
@Component({
selector: 'app-material-two',
templateUrl: './material-two.component.html',
styleUrls: ['./material-two.component.css']
})
export class MaterialTwoComponent implements OnInit {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource:any;
@ViewChild(MatSort, { static: false }) sort!: MatSort;
constructor(private service:AddAssetService) { }
ngOnInit(): void {
this.assetGrid();
this.ngAfterViewInit()
console.log(this.dataSource);
}
assetGrid() {
this.service.GetAssets().subscribe(user=>{
this.dataSource = new MatTableDataSource<Element>(user);
console.log("this.listData",this.dataSource);
console.log("this.user",user)
});
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
}
得到错误:
core.js:6210 错误类型错误:无法设置未定义的属性“排序”。
解决方案
你可以避免这个错误
core.js:6210 错误类型错误:无法设置未定义的属性“排序”。
通过检查在分配之前this.dataSource
不能先undefined
或null
先,如下所示:
.component.ts
if (this.dataSource) {
this.dataSource.sort = this.sort;
}
关注点
问题1:缺少工具AfterViewInit
您必须AfterViewInit
在您的组件上实现。否则,ngAfterViewInit
将不会被执行。this.ngAfterViewInit
并从方法中删除调用ngOnInit
方法。
.component.ts
import { AfterViewInit } from '@angular/core';
export class MaterialTwoComponent implements OnInit, AfterViewInit {
ngOnInit(): void {
this.assetGrid();
console.log(this.dataSource);
}
...
}
关注点2:matColumnDef
必须与属性名称完全相同
matColumnDef
必须与数据的属性名称相同。如果没有,排序将不起作用。因此,您还需要更新displayedColumns
属性。
.component.html
<ng-container matColumnDef="assetId">
...
</ng-container>
<ng-container matColumnDef="assetName">
...
</ng-container>
<ng-container matColumnDef="cpuName">
...
</ng-container>
<ng-container matColumnDef="hddName">
...
</ng-container>
.component.ts
displayedColumns: string[] = ['assetId', 'assetName', 'cpuName', 'hddName'];
参考
推荐阅读
- c# - 项目“Projr”不是最新的。在 VS 2017 管理员模式下缺少输出文件 'c:\..\bin\Debug\Projr.dll'
- oracle - OraclePropertyGraphDataLoader 从 HDFS 加载数据
- ruby - Ruby 2.6.1 的 Docker 映像
- c++ - 用于格式转换/简单转换的 FFMpeg 与 OpenCV
- sql - 摆脱重复记录和计算字段
- c# - 无法查看控制台 exe。窗纱
- mysql - 解释一下理解这个复杂查询的方法
- arrays - 所有数组元素的 MongoDB 唯一索引
- javascript - 这个“[]”在这里做什么?
- javascript - 在 React-Native 中连接选择器