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

Question

我正在用 Angular 9 开发一个应用程序。这个应用程序显示基于 mat-table 的数据，但它被某些字段过滤的数据，类似于：

问题是下拉列表显示重复值（这是正常的，因为例如一个国家可以在某些行中重复），并且显示的数据是基于 mat-table dataSource.filteredData 所以我不能做new Set() 或类似的。我问自己如何 change/modify 我的代码在下拉列表中仅显示唯一值。

我的代码类似这样：

<mat-form-field appearance="fill">
    <mat-label>Select an option</mat-label>
    <mat-select>
        <mat-option *ngFor="let country of dataSource.filteredData">{{country.name}}</mat-option>
    </mat-select>
</mat-form-field>

...

<table>
...
</table>

psd: 我试着为独特的管道做一个管道，但这只适用于 statick 数组，我的数组根据过滤器而变化。

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

Answer 1

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

首先，我创建了 return non-repeated 数组的函数：

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

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

Display Unique values of mat-select that gets data from Angular filtered dataSource

typescript

angular

mat-table