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-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 TypeError：无法读取属性＆＃39; filter＆＃39;未定义的在 MatchesSportPipe.webpackJsonp ... / .. / .. / .. / .. / src目录/应用/ 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);
  }

整个行为在一个工作的掠夺者中恢复：https://embed.plnkr.co/4NDIy84YFW7OZkVPJZo5/

Angular2自动完成过滤器* ngFor data

1 个答案: