Angular2自动完成过滤器* ngFor数据

Question

我正在学习角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> 

这是我* ngFor显示的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" 
    }); 

    } 
} 

Answer 1

首先，指数应该是管后：

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

而， 您使用option这是在管不确定的。你需要得到从自动完成选用的价值，这把管道参数（这里option）：

你可以使用：optionSelected事件垫自动完成

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="optionSelected($event)" name="myname"> 
    <mat-option *ngFor="let option of options" [value]="option"> 
... 
    </mat-option> 
</mat-autocomplete> 

和组件：

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

然后，对于错误：

error of : ERROR TypeError: Cannot read property 'filter' of undefined at MatchesSportPipe.webpackJsonp.../../../../../src/app/customP‌​ipe.ts.MatchesSportP‌​ipe.transform (customPipe.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：https://embed.plnkr.co/4NDIy84YFW7OZkVPJZo5/