显示从Angular过滤的数据源获取数据的mat-select的唯一值

Question

我正在使用Angular 9开发应用程序。 这个应用程式会根据资料表显示资料，但资料会被某些栏位筛选，例如：

问题在于下拉列表显示重复的值（这是正常的，例如，某个国家可以在某些行中重复），并且显示的数据基于mat-table dataSource.filteredData，因此我无法执行{{ 1}}或类似的内容。我问自己如何更改/修改代码以在下拉列表中仅显示唯一值。

我的代码与此类似：

new Set()

psd：我尝试为唯一的管道做一个管道，但这仅适用于statick数组，并且我的数组根据过滤器而变化。

有什么建议吗？ 谢谢您的帮助?

Answer 1

我找到了一个可行的解决方案，基本上我重构了ngFor代码并创建了一个函数，该函数返回没有重复值的数组。

首先，我创建了一个返回非重复数组的函数：

//Basically this method only needs the name of the field/key you are searching
nonRepeated(field: string): string[] {
//First we create the array that we want to return transformed
    let arrayField = [];
//We iterate over our filteredData
    for (let item of this.dataSource.filteredData) {
//We push the value of the field to our previous array
      arrayField.push(item[field]);
    }
//Here we sort the Array alphabetically
    arrayField = arrayField.sort();
//Finally we return the array with non-repeated values thanks to ES6 ❤
    return [...new Set(arrayField)];
  }

Set ES6的附加信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

重构的ngFor

<mat-form-field appearance="fill">
    <mat-label>Select an option</mat-label>
    <mat-select>
        <mat-option *ngFor="let country of nonRepeated('country')">{{country}}</mat-option>
    </mat-select>
</mat-form-field>

Answer 2

使用ES6以下功能

this.arr=this.arr.filter((val,ind,arr)=>arr.indexOf(val)===ind)