Angular2オートコンプリートフィルター* ngデータ

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> 

は、MD-カードのリストを表示するngFor私*です：

<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/