Question

我希望能够在输入输入时过滤列表对象。但它一直给我一个错误我认为它与管道无法正确读取值。

//our root app component
import {Component, NgModule, Pipe, PipeTransform} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms'

@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
  public transform(values: any[], filter: string): any[] {
    if (!values || !values.length) return [];
    if (!filter) return values;

    return values.filter(v => v.indexOf(filter) >= 0);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <input [(ngModel)]="filterString" />
      <div *ngFor="let d of (data | filter: filterString)">
        {{ d.id }}
      </div>
    </div>
  `,
})
export class App {
  name:string;
  data = [{id: 1, leagueName: 'Recreation League' },
  {id: 2, leagueName: 'Recreation League' },
  {id: 3, leagueName: 'Recreation League' }
  ]; 

  filterString = '';

  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App, FilterPipe ],
  bootstrap: [ App ]
})
export class AppModule {}

提前谢谢

Answer 1

这在Angular中并不适合使用管道。我知道AngularJS（即Angular 1）有一个'过滤器过滤器'但是在有消化循环之前就已经过了。

更好的方法是将过滤转移到组件上的方法中。

Answer 2

经过大量的研究和挖掘代码。这是我如何让它工作。问题是过滤器需要比较对象的值而不是对象。所以，基本上改变

ValueError: need more than 2 values to unpack

到

return values.filter(v => v.indexOf(filter) >= 0);

这是最终结果。

return values.filter(v => v.email.indexOf(filter) >= 0);

Angular2带对象的管道过滤器

2 个答案: