angular - 角材料中没有发生排序
问题描述
我正在尝试为带有角材料的垫表添加排序功能。我的手形光标在我的列上,当我点击时,我看不到它的动作。我已将属性“matsort”添加到表级别和用于 mat-header-cell 选择器的“mat-sort-header”。2) 其次,我无法查看我的“操作”列进行编辑和删除。以下是我的代码:
应用组件.html:
<mat-table [dataSource]="emplist" matSort>
<ng-container matColumnDef="Emp_Id">
<mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
<mat-cell *matCellDef="let data"> {{data.Emp_Id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Emp_Name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
<mat-cell *matCellDef="let data"> {{data.Emp_Name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Emp_Gender">
<mat-header-cell *matHeaderCellDef mat-sort-header> Gender </mat-header-cell>
<mat-cell *matCellDef="let data"> {{data.Emp_Gender | settingGender}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Emp_Deptname">
<mat-header-cell *matHeaderCellDef mat-sort-header> Department </mat-header-cell>
<mat-cell *matCellDef="let data"> {{data.Emp_Deptname}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Emp_Salary">
<mat-header-cell *matHeaderCellDef mat-sort-header> Salary </mat-header-cell>
<mat-cell *matCellDef="let data"> {{data.Emp_Salary}} </mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
<mat-cell *matCellDef="let data">
<button mat-button color="primary" (click)="EditEmployee(data.Emp_Id)">Edit</button>
<button mat-button color="warn" (click)="DeleteEmployee(data.Emp_Id)">Delete</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="columndefs"></mat-header-row>
<mat-row *matRowDef="let row; columns: columndefs;"></mat-row>
<!-- <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator> -->
</mat-table>
应用组件.ts :
import { Component, OnInit, ViewChild } from '@angular/core';
import { EmployeeinfoService } from './employeeinfo.service';
import { FormBuilder, FormGroup, FormControl,Validators } from '@angular/forms';
import {Sort,MatSort} from '@angular/material/sort';
import { Employee } from './employee';
import {MatTableDataSource} from '@angular/material/table';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
columndefs : any[] = ['Emp_Id','Emp_Name',"Emp_Gender","Emp_Deptname","Emp_Salary"];
@ViewChild(MatSort) sort: MatSort;
title = 'HttpClient';
emplist : any;
deptlist :any;
myform : FormGroup;
result : string;
submitted : boolean = false;
btntxt : string = "Create";
public dataSource = new MatTableDataSource<Employee>();
//constructor
constructor(public serviceref : EmployeeinfoService, frmbldr : FormBuilder){
this.myform = frmbldr.group({
Emp_Name : new FormControl("",Validators.required),
Emp_Gender : new FormControl("",Validators.required),
Emp_Deptno : new FormControl("",Validators.required),
Emp_Salary : new FormControl("",Validators.required),
})
}
//ngOnInit
ngOnInit(){
this.dataSource.sort = this.sort;
//Get Employees:
this.GetEmployeesData();
}
}
目前,我可以在鼠标悬停时查看具有排序效果的数据和列,但排序没有发生
解决方案
推荐阅读
- swift - 在 SwiftUI 中选择注释时显示覆盖视图
- javascript - 如何通过 refs 在 React 中聚焦输入
- c# - 将 ViewBag 与 @Html.CheckBoxFor 一起使用而不是“普通”
- linux - 在这种情况下如何创建图像?
- esp8266 - 等 2013 年 1 月 8 日,第一个原因:4,引导模式:(1,7) wdt 重置
- windows - 是否可以停止 ANSI 序列中的“powershell”包装输出?
- python - 在具有特定格式的字符串列表中查找最大数
- flutter - 如何使用getx在一个控制器中获取另一个控制器的变量
- julia - 将 Plotly 图形发送到 Dash 应用程序时,为什么会收到 StackOverflowError?
- c++ - 使用模板参数包扩展枚举