如何根据垫子单选按钮单击[活动/非活动/全部]获取员工列表

Question

我在仪表板中显示了员工列表，包括(活跃，非活跃员工(。所以现在我想默认只显示活跃员工的列表。如果我单击非活动单选按钮，那么它应该只显示非活动列表。All 表示员工活动和非活动的所有列表。

网页

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 mb-4 col-full" widget>
<div class="silk-card border-success pb-0">
<div class="silk-card-title d-flex justify-content-between">
<h4><i class="fa fa-users fa-lg mx-1"></i>Employees List</h4>
<mat-radio-group [(ngModel)]="isActive" (ngModelChange)="getUsersDataOfType($event)">
<mat-radio-button [value]="1"><b>Active</b></mat-radio-button>
<mat-radio-button [value]="0"><b>Inactive</b></mat-radio-button>
<mat-radio-button [value]="2"><b>All</b></mat-radio-button>
</mat-radio-group>
</div>
<div class="silk-card-content widget-body">
<div class="table-responsive">
<div class="mat-elevation-z8">
<mat-table [dataSource]="listData" matSort *ngIf="isActive">
<ng-container matColumnDef="employeeId">
<mat-header-cell [ngClass]="'customWidthClassSmall'" *matHeaderCellDef mat-sort-header>Employee ID
</mat-header-cell>
<mat-cell [ngClass]="'customWidthClassSmall'" *matCellDef="let element">
<b>{{element.actualEmployeeCode}}</b></mat-cell>
</ng-container>
<ng-container matColumnDef="firstname">
<mat-header-cell [ngClass]="'customWidthClassMedium'" *matHeaderCellDef mat-sort-header>Name
</mat-header-cell>
<mat-cell [ngClass]="'customWidthClassMedium'" *matCellDef="let element">
<b>{{element.firstname | titlecase }} {{element.lastname | titlecase }}</b></mat-cell>
</ng-container>
<!-- <ng-container matColumnDef="lastname">
<mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</mat-header-cell>
<mat-cell style="text-align: center;" *matCellDef="let element">{{element.lastname}}</mat-cell>
</ng-container> -->
<ng-container matColumnDef="emailaddress">
<mat-header-cell [ngClass]="'customWidthClassLarge'" *matHeaderCellDef mat-sort-header>Email
</mat-header-cell>
<mat-cell [ngClass]="'customWidthClassLarge'" *matCellDef="let element">{{element.emailaddress}}
</mat-cell>
</ng-container>
<!-- <ng-container matColumnDef="deptname">
<mat-header-cell *matHeaderCellDef mat-sort-header>Department</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.deptname}}</mat-cell>
</ng-container> -->
<ng-container matColumnDef="rolename">
<mat-header-cell [ngClass]="'customWidthClassSmall'" *matHeaderCellDef mat-sort-header>Role
</mat-header-cell>
<mat-cell [ngClass]="'customWidthClassSmall'" *matCellDef="let element">{{element.rolename}}</mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell [ngClass]="'customWidthClassSmall'" *matHeaderCellDef mat-sort-header>Status
</mat-header-cell>
<mat-cell [ngClass]="'customWidthClassSmall'" *matCellDef="let element">
<span *ngIf="element.isactive == 1" style="color: green; font-weight: bold;">Active</span>
<span *ngIf="element.isactive == 0" style="color: #E83F6F; font-weight: bold;">Inactive</span>
</mat-cell>
</ng-container>
<!-- <ng-container matColumnDef="length_service">
<mat-header-cell [ngClass]="'customWidthClassSmall'" *matHeaderCellDef mat-sort-header>Length of Service</mat-header-cell>
<mat-cell [ngClass]="'customWidthClassSmall'" *matCellDef="let element">{{ element.length_service }}</mat-cell>
</ng-container> -->
<ng-container matColumnDef="actions">
<mat-header-cell [ngClass]="'customWidthClassSmall'" *matHeaderCellDef>Actions</mat-header-cell>
<mat-cell [ngClass]="'customWidthClassSmall'" *matCellDef="let row">
<button mat-icon-button>
<a [routerLink]="['/hr/editemployee',row.user_id]">
<mat-icon>mode_edit</mat-icon>
</a>
</button>
<!-- <button mat-icon-button color="warn" (click)="open(row)">
<a [routerLink]="['/hr/editemployee',row.user_id]"><mat-icon>delete_outline</mat-icon></a>  
</button> -->
</mat-cell>
</ng-container>
<ng-container matColumnDef="loading">
<mat-footer-cell *matFooterCellDef colspan="4">
Loading data...
</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="noData">
<mat-footer-cell *matFooterCellDef colspan="4">
No data.
</mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-footer-row *matFooterRowDef="['loading']" [hidden]="(listData!=null)"></mat-footer-row>
<mat-footer-row *matFooterRowDef="['noData']" [hidden]="!(listData!=null && listData.data.length==0)">
</mat-footer-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[1,5, 10, 25, 100]" [pageSize]="10" showFirstLastButtons></mat-paginator>
</div>
</div>
</div>
</div>
</div>
</div>```


#TS file#
getUsersDataOfType(value) {
this.ser.Getmethod('api/Employee1/GetEmploymees').subscribe(data => {
this.data = data;
if (value == 1) {
console.log('Value : ' + value);
$(document).ready(function () {
console.log('JQUERY');
this.listData = new MatTableDataSource(this.data);
this.listData.sort = this.sort;
this.listData.paginator = this.paginator;
});
} else if (value == 0) {
console.log('Value : ' + value);
$(document).ready(function () {
console.log('JQUERY');
this.listData = new MatTableDataSource(this.data);
this.listData.sort = this.sort;
this.listData.paginator = this.paginator;
});
} else if (value == 2) {
console.log('Value : ' + value);
$(document).ready(function () {
console.log('JQUERY');
this.listData = new MatTableDataSource(this.data);
this.listData.sort = this.sort;
this.listData.paginator = this.paginator;
});
}
},
error => {
this.errormethod(error);
});
}

[![enter image description here][1]][1]

[1]: https://i.stack.imgur.com/8nxD5.jpg

Answer 1

当用户请求活动或非活动 emps 时，您无需调用 API 偶数时间，只需根据事件过滤数据并显示结果即可 获取 ngOnInit(( 方法中的所有员工，

ngOnInit(){
//api get all employees
this.data = result;
this.listData = new MatTableDataSource(this.data);
this.listData.sort = this.sort;
this.listData.paginator = this.paginator;
}
getUsersDataOfType(value) {
var filteredData = [];
// filter this.data based on the value; and assign result to filteredData array
this.listData.data = filteredData;
}

而且你不需要将 $(document(.ready(function (( {} 函数与 Angular 一起使用。