使用管道过滤器从JSON数据显示多个下拉列表的唯一数据

Question

我有一个json数据，该数据具有要在表中显示的列，并使用相同的json数据过滤数据以进行下拉，如下所示的代码

JSON数据

ShipData[] = [
  {
    'ruleset': 'apple',
    'model': '777',
    'carl': '4.1.2',
    'username': 'JohnF',
    'status': 'Production'
  },{
    'ruleset': 'banana',
    'model': '777',
    'carl': '4.1.2',
    'username': 'ChrisP',
    'status': 'Production'
  },{
    'ruleset': 'orange',
    'model': '777',
    'carl': '4.1.2',
    'username': 'MikeU',
    'status': 'Production'
  }];

HTML文件是

<mat-form-field>
        <mat-select [(ngModel)]="selected.ruleset" (ngModelChange)="onSelect(selectedRule)" placeholder="Rule Set">
          <mat-option *ngFor="let rule of shipData| uniqueFilter: 'ruleset'" [value]="rule.ruleset">{{rule.ruleset}}</mat-option>
        </mat-select>
      </mat-form-field>
<mat-form-field>
        <mat-select [(ngModel)]="selected.model" (ngModelChange)="onSelect(selectedModel)" placeholder="Model">
          <mat-option *ngFor="let model of dataSource.data | uniqueFilter: 'model'" [value]="model.model">{{model.model}}</mat-option>
        </mat-select>
      </mat-form-field> .... like this for 5 filters are there 

我的管道过滤器代码是

import { Pipe, PipeTransform, Injectable } from '@angular/core';

@Injectable()
@Pipe({
  name: 'uniqueFilter',
  pure: false
})

export class UniqueFilterPipe implements PipeTransform {
  transform(values: any, args: string): any {
    let results = new Array<any>();

    values.forEach((product,index,collection) => {
      if(args === null || args){            
        if(collection.map(product => product.args).indexOf(product.args) === index){
          return results.push(product);
        }
      }

    }); 
    return results;   
  }
}

现在下拉菜单中的iam为每个下拉列表获取单个值。可以帮助我获取html dropdpwn的唯一值。