Angular 5 - использование фильтра в теге select с трубкой

У меня есть html-тег select, и я хочу отфильтровать свой список результатов по выбранному значению. Я использую канал, чтобы показать их в списке, созданном *ngFor. когда я добавляю новый элемент, тег select добавляет новый параметр, даже если параметр с таким же именем еще существует. Как я мог это исправить? Я хочу, чтобы в моем теге выбора отображалось только уникальное значение (Фильтр ???). Я бы тоже хотел установить значение по умолчанию.

Скриншот:

App.component.html:

<div class = "container">
  <div class = "row">
  <div class = "col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">

  <select
    name = "serverStatus"
    id = "serverStatus"
    [(ngModel)] = "filteredStatus">
    <option
      *ngFor = "let server of servers"
      value = "{{server.status}}">{{server.status}}</option>
  </select>
  <hr>
  <ul class = "list-group">
    <li
      class = "list-group-item"
      *ngFor = "let server of servers | filter:filteredStatus:'status'"
      [ngClass] = "getStatusClasses(server)">
      <span
        class = "badge">
        {{ server.status }}
      </span>
      <strong>{{ server.name }}</strong> |
      {{ server.instanceType | uppercase }} |
      {{ server.started | date:'fullDate' | uppercase }}
    </li>
  </ul>
</div>

App.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  servers = [
{
  instanceType: 'medium',
  name: 'Production Server',
  status: 'stable',
  started: new Date(15, 1, 2017)
},
{
  instanceType: 'large',
  name: 'User Database',
  status: 'stable',
  started: new Date(15, 1, 2017)
},
{
  instanceType: 'small',
  name: 'Development Server',
  status: 'offline',
  started: new Date(15, 1, 2017)
},
{
  instanceType: 'small',
  name: 'Testing Environment Server',
  status: 'critical',
  started: new Date(15, 1, 2017)
}
];

filteredStatus = '';

getStatusClasses(server: {instanceType: string, name: string, status: string, started: Date}) {
return {
  'list-group-item-success': server.status === 'stable',
  'list-group-item-warning': server.status === 'offline',
  'list-group-item-danger': server.status === 'critical'
};
}
}

fiter.pipe.ts:

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

transform(value: string[], filterString: string, propName:string): any {
if (value.length === 0 || filterString === '') {
  return value;
}
const resultArray = [];
for (const item of value) {
  if (item[propName] === filterString) {
    resultArray.push(item)
  }
}
return resultArray;
}
}

Вот рабочий пример stackblitz: https://angular-rwmfbj.stackblitz.io Редактор: https://stackblitz.com/edit/angular-nck1kn