Angular2自动完成过滤器*用于数据

我正在学习角度2管道，遇到了问题。我有一个自动完成框，一旦选择了输入，就会从我的*NGF中过滤出数据，因为它会显示卡片列表。现在，当您开始键入自动完成功能时，但当选择实际类别时，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"
     });

   }
 }

首先，索引应位于管道之后：

<md-list-item *ngFor="let g of games | matchesSport:option; let i = index ">
  ...
</md-list-item>

在组件中：

option: string; // <-- use it now
// ...
optionSelected(e) {
  this.option = e.option.value;
}

然后，对于错误：

---

错误：错误类型错误：无法读取未定义的属性“筛选器” 在 MatchesSportPipe.webpackJsonp…/../../../../../../../src/app/customP‌​ipe.ts.MatchesSportP‌​ipe.transform 定制管道。ts:9

在过滤项目之前，您现在需要在管道中检查项目是否未定义，类别是否未定义

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

---

整个行为在一个工作的plunker中恢复：

error of:error TypeError:Cannot read MatchesSportPipe.webpackJsonp…/../../../../../../../../src/app/customPipe.ts.MatchesSportPipe.transform customPipe.ts:9所以我这样做了：导出类MatchesSportPipe实现PipeTransform{transformitems:any[]，类别：字符串：数组{return items.filterietem=>item.Sport==category；}}，相同error@TroyBryant或者，如果仅定义了数据，您也可以检入管道以工作。添加了“我的控制器”。进行了管道调整，但仍然相同error@TroyBryant查看我的答案，检查管道中的项目是否未定义。查看答案，我已使用工作小提琴进行了更新。

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