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

【问题标题】：How to display a table of employee details based on gender selection by the user, by providing the user 3 radio buttons如何通过为用户提供 3 个单选按钮，根据用户选择的性别显示员工详细信息表
【发布时间】：2022-02-16 22:07:43
【问题描述】：

我在视图中创建了一个员工表，使用 json 数组将员工详细信息存储在我的组件中，并提供了 3 个单选按钮，分别命名为：所有、男性和女性。

我想要的是，当我点击全部时，它应该显示包含所有员工的表格。当我点击男性时，它应该只显示男性员工的表格，当点击女性时，它应该只显示女性候选人的表格。谁能帮我根据我的要求向单选按钮添加事件？

这是我的代码：

组件：

  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>

【问题讨论】：

标签： html angular typescript

【解决方案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)
  }

并且迭代超过employeesFiltered

<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:selectedgender

<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)
  }

并遍历employeesFiltered2

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

你可以认为最后两个选项更“优雅”，但要小心。这两个选项使得函数（或管道）在组件的生命周期内执行多次。那就是“效率”较低。在这种情况下不是什么大问题（没有机构可以检测到这种效率损失），但您需要考虑到管道或吸气剂会被执行多次。

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

您在this stackblitz 中有一个这三种方法的示例。我在 stackblitz 中放了一个“console.log”，以便查看每个函数执行了多少次。

【讨论】：