Фильтрация массива в angular2

Я изучаю, как фильтровать массив данных в Angular2.

Я изучил использование настраиваемого канала, но я чувствую, что это не то, что я ищу, поскольку он, похоже, больше ориентирован на простые преобразования представления, а не на фильтрацию больших наборов данных.

Массив задается следующим образом:

getLogs(): Array<Logs> {
        return [
            { id: '1', plate: 'plate1', time: 20 },
            { id: '1', plate: 'plate2', time: 30 },
            { id: '1', plate: 'plate3', time: 30 },
            { id: '2', plate: 'plate4', time: 30 },
            { id: '2', plate: 'plate5', time: 30 },
            { id: '2', plate: 'plate6', time: 30 }
        ];
    }

Я хочу отфильтровать это по id. Поэтому, когда я вводю "1" в строку поиска, он обновляется, чтобы отображать соответствующие значения.

Если есть способ, как это сделать, я хотел бы знать!

Ответ 1

Нет способа сделать это, используя стандартный канал. Ниже приведен список поддерживаемых труб по умолчанию: https://github.com/angular/angular/blob/master/modules/angular2/src/common/pipes/common_pipes.ts.

Тем не менее, вы можете легко добавить канал для такого использования:

import {Injectable, Pipe} from 'angular2/core';

@Pipe({
    name: 'myfilter'
})
@Injectable()
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], args: any[]): any {
        return items.filter(item => item.id.indexOf(args[0]) !== -1);
    }
}

И используйте его:

import { MyFilterPipe } from './filter-pipe';
(...)

@Component({
  selector: 'my-component',
  pipes: [ MyFilterPipe ],
  template: `
    <ul>
      <li *ngFor="#element of (elements | myfilter:'123')">(...)</li>
    </ul>
  `
})

Надеюсь, это поможет вам, Thierry

Ответ 2

У меня есть аналогичный сценарий в одном из моих образцов

<input "(keyup)="navigate($event)" />

<div *ngFor="#row of visibleRows"></div>    

......

navigate($event){
        this.model.navigate($event.keyCode);
        this.visibleRows = this.getVisibleRows();
}

getVisibleRows(){
    return this.model.rows.filter((row) => row.rowIndex >= this.model.start && row.rowIndex < this.model.end);
}

Мой подход заключается в пересчете массива на какое-то квалифицируемое событие. В моем случае это keyup. Может показаться удобным привязка к функции или фильтру, но рекомендуется вместо этого привязываться к массиву. Это связано с тем, что отслеживание изменений будет запутано, поскольку функция/фильтр будет возвращать новый экземпляр массива каждый раз, когда срабатывает отслеживание изменений - независимо от того, что вызвало его.

Вот полный источник: https://github.com/thelgevold/angular-2-samples/tree/master/components/spreadsheet

У меня также есть демо: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet