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

Question

我正在学习 angular 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-cards 列表：

  <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）：

您可以使用：mat-autocomplete 中的 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/

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

Angular2 auto complete filter *ngFor data

angular

pipe

angular-filters

ngfor

angular-pipe