角度2过滤器ng根据生活用户输入的元素？

Question

是什么一个插件来过滤元素rendred使用*ngFor根据每个后的实时用户输入keyup event？

Answer 1

没有插件需要!

两种可能的方式:

• 使用过滤功能并拥有过滤后的数据数组(性能更佳!)

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <input (keyup)="search($event.target.value)" />
      <div *ngFor="let d of filteredData">
        {{ d }}
      </div>
    </div>
  `,
})
export class App {
  name:string;
  data = [
    "val1",
    "val2",
    "val3",
    "val4",
    "val5",
    "val6",
    "test",
    "huhu"
  ];
  filteredData = this.data;

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

  search(val: any) {
    if (!val) this.filteredData = this.data;

    this.filteredData = this.data.filter(d => d.indexOf(val) >= 0);
  }
}

现场演示:https://plnkr.co/edit/9NtT6Z4RIg4BR1BVfh7r?p=preview

• 或使用 Pipe

@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 }}
      </div>
    </div>
  `,
})
export class App {
  name:string;
  data = [
    "val1",
    "val2",
    "val3",
    "val4",
    "val5",
    "val6",
    "test",
    "huhu"
  ];

  filterString = '';

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

现场演示:https://plnkr.co/edit/usgvA1hpqQ06zJxMrx4f？p = preview