Angular2 автозаполнение фильтра * ng для данных

Я изучаю угловые 2 трубы и сталкиваюсь с проблемой. У меня есть поле автозаполнения, которое после выбора ввода должно отфильтровывать данные из моего * ngFor, который отображает список карточек. Прямо сейчас, когда вы начинаете печатать, автозаполнение работает, но когда выбрана фактическая категория, список карточек в ngFor не фильтруется. Что мне не хватает?

Спасибо

Итак, вот мое автозаполнение:

<form class="example-form">
  <md-form-field class="example-full-width">
  <input type="text" placeholder="Select a sport" aria-label="Number" mdInput 
     [formControl]="myControl" [mdAutocomplete]="auto">
    <md-autocomplete #auto="mdAutocomplete">
    <md-option *ngFor="let option of filteredOptions | matchesSport:option | 
     async" [value]="option">
      {{ option }}
    </md-option>
  </md-autocomplete>
</md-form-field>
</form>

Вот мой * ng для отображения списка md-карт:

  <md-list>      
  <md-list-item *ngFor="let g of games; let i = index | matchesSport:option" (click)="onSelect(g)" [class.active]="i == selectedRow">
    <md-card tabindex="-1">
      <md-card-content>
        <p md-line> {{g.Sport}}<span><i class="material-icons">accessibility</i></span> </p>
      </md-card-content>
      <md-card-actions>
        <button md-button md-raised-button>LIKE</button>
        <button md-button md-raised-button>SHARE</button>
      </md-card-actions>
    </md-card>
  </md-list-item>
</md-list>

А вот и моя трубка

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

@Pipe({
    name:'matchesSport'
})

 export class MatchesSportPipe implements PipeTransform {
    transform(items: any, category: string): Array<any> {            
    return items.filter(item => item.Sport === category);
  }
 }

А вот и мой контроллер:

import { Component, OnInit } from '@angular/core'; 
import { Game } from './models/game.model';
import { GameService } from './services/game-service';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';     
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';

export class AppComponent implements OnInit {
  title = 'app';
  games: any[] = [ ];
  statusMessage: string = "Loading games...";
  selectedRow: Object;
  setClickedRow: Function;
  selectedGame: Game;
  myControl: FormControl = new FormControl();

  options = [
   'Football',
   'Basketball',
   'Baseball',
   'Lacrosse',
   'Volleyball'
  ];

   filteredOptions: Observable<string[]>;

   constructor(private _gameService: GameService) {
     this.filteredOptions = this.myControl.valueChanges
     .startWith(null)
     .map(val => val ? this.filter(val) : this.options.slice());
    }
   filter(val: string): string[] {
     return this.options.filter(option =>
     option.toLowerCase().indexOf(val.toLowerCase()) === 0);
   }

   onSelect(game: Game): void {
     this.selectedGame = game;
    }


   ngOnInit() {
        return this._gameService.getGames()
       .subscribe((gameData) => this.games = gameData,
       (error) => {
       this.statusMessage = " something broke"
     });

   }
 }