如何通过向用户提供3个单选按钮，根据用户的性别选择显示员工详细信息表

Question

我在视图中创建了一个员工表，使用json数组将员工详细信息存储在我的组件中，并提供了3个单选按钮：all、male和female。

我想要的是，当我点击所有时，它应该显示所有员工的表格。当我点击男性时，它应该只显示男性员工的表格，当我点击女性时，它只显示女性候选人的表格。有人能帮我根据自己的要求在单选按钮中添加事件吗？

这是我的代码：

组件：

selectedgender = 'all';
employees: any;

constructor() {
this.selectedgender = 'all';
this.employees=  [
{"FirstName":"Karthik", "LastName":"Dobbaka", "Age":29, "gender":"Male"},
{"FirstName":"Yashwanth", "LastName":"Reddy", "Age":28, "gender":"Male"},
{"FirstName":"Shiva", "LastName":"Kondella", "Age":31, "gender":"Male"},
{"FirstName":"Arthi", "LastName":"Bharadwaj", "Age":29, "gender":"Female"},
{"FirstName":"Kavya", "LastName":"Gadadasu", "Age":27, "gender":"Female"},
{"FirstName":"Kishore", "LastName":"Veldandi", "Age":30, "gender":"Male"},
{"FirstName":"Shrinivas", "LastName":"Bandi", "Age": 34, "gender":"Male"},
{"FirstName":"Sowmya", "LastName":"Dasari", "Age":26, "gender":"Female"}
];
}

视图：

<form>
<div>
<label>Select</label>
<label>
<input type="radio" name="gender" value="all"  [(ngModel)]="selectedgender">All
</label>
<label>
<input type="radio" name="gender" value="male" [(ngModel)]="selectedgender">Male
</label>
<label>
<input type="radio" name="gender" value="female" [(ngModel)]="selectedgender">Female
</label>
</div>
<table border="2px">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
<th>gender</th>
</tr>
</thead>
<tr *ngFor=" let emp of employees">
<td>{{ emp.FirstName }}</td>
<td>{{ emp.LastName }}</td>
<td>{{ emp.Age }}</td>
<td>{{ emp.gender }}</td>
</tr>
</table>
</form>

Answer 1

每个有三个

1.-使用辅助变量

贴花是辅助变量

employeesFiltered=this.employees

在[ngModel](ngModelChange(中拆分[(ngModel(]以调用函数

<input ...
[ngModel]="selectedgender" 
(ngModelChange)="selectedgender=$event;filter($event)"
>

和一样的功能过滤器

filter(gender:string){
this.employeesFiltered=gender=='all'?this.employees:
this.employees.filter(x=>x.gender.toLowerCase()==gender)
}

并且迭代超过员工筛选

<tr *ngFor=" let emp of employeesFiltered">
...
</tr>

2.-使用管道。管道变换"；任何东西"；在其他中

@Pipe({
name: 'filterEmployees'
})
export class FilterEmployeesPipe implements PipeTransform {
transform(value: any[], args?: any): any {
console.log(args)
return args=='all'?value:value.filter(x=>x.gender.toLowerCase()==args);
}
}

然后您迭代员工|filterEmployees:selectedender

<tr *ngFor=" let emp of employees |filterEmployees:selectedgender">
...
</tr>

3.-使用吸气剂。这就是你的伟大功能

get employeesFiltered2()
{
return this.selectedgender=='all'?this.employees:
this.employees.filter(x=>x.gender.toLowerCase()==this.selectedgender)
}

并对员工进行迭代Filtered2

<tr *ngFor="let emp of employeesFiltered2">
...
</tr>

你可以认为最后两个选项是更多的"；优雅"；，但是要小心。这两个选项使函数(或管道(在组件的活动过程中执行多次。这是较少的"；效率"；。在这种情况下，这不是一个大问题(没有人能检测到效率的损失(，但您需要考虑管道或getter被执行了几次。

好吧，你可以避免使用OnPush更改检测，但这需要另一个答案，而且这是一个有点大的

您在这个堆栈中有一个三种方法的例子。我把一个"；console.log"；以便查看每个函数执行了多少次。