如何使用ngFor创建仅具有唯一结果的选择框

Question

我正在尝试创建一个搜索过滤器，以按特定类别过滤结果。例如，假设有一组员工，我想创建一个每个员工部门均可选择的选择框。

我已经尝试找到有关此类的教程，但是尽管我认为这并不是一个罕见的问题，但我似乎找不到任何问题。下面是我当前的代码，尽管很标准。

<select>
   <option *ngFor="let employee of employees">
      {{employee.Department}}
   </option>
</select>

如果我以标准方式使用ngFor，则会得到一个带有以下选项的选择框：

人力资源 人力资源 人力资源 管理 程式设计 编程

如何以不添加现有选项的方式操作ngFor，也就是说，将选择框更改为仅具有以下选项：

人力资源 管理 编程

Answer 1

只需创建要显示的唯一值数组即可。因此，每次this.employees发生变化时，（在您的控制器中）计算this.departments = [...new Set(this.employees.map(e => e.Department))];，然后与ngFor遍历部门。