Угловой 6 Фильтр наблюдаемого массива с трубкой - PullRequest
Новая
       34

Угловой 6 Фильтр наблюдаемого массива с трубкой

0 голосов
/ 10 января 2019

Я отображаю список объектов в цикле ngFor, и я хотел бы отфильтровать этот список с помощью канала.

Мои исследования привели меня к этому:

фильтр-by.pipe.ts: 

import { Pipe, PipeTransform } from '@angular/core';
import { UserLink } from '../_models/user-link';

@Pipe({
    name: 'filterBy'
})
export class FilterByPipe implements PipeTransform {
    transform(items: User[], isActive: boolean): any {
        if (!items) { return []; }
        return items.filter(x => x.isActive === isActive);
    }
}

в my.component.html: 

<tr *ngFor="let item of items$|async|filterBy: {isActive: false}">
    <td>{{item.firstname}}</td>
    <td>{{item.lastname}}</td>
    <td>{{item.age}}</td>
</tr>

Но результат не тот, который я ожидаю: мой массив пуст.

Что мне не хватает, чтобы заставить его работать?

Я попробовал свое решение в этом стеке (https://stackblitz.com/edit/angular-46atle)), и оно работает. Но я все еще не могу заставить его работать в моем проекте. Я проверил свойства моего объекта и остальной части кода, но я не могу не вижу, где моя ошибка

[EDIT]

Проблема решена! Между объектом, по которому я фильтровал объект, и объектом, по которому, как мне казалось, я фильтровал, отсутствовал отбор! Ошибка новичка!

Спасибо за ваше участие!

Ответы [ 3 ]

0 голосов
/ 10 января 2019

вы можете фильтровать ваш массив следующим образом: 

 <tr *ngFor="let item of _items | filter:{label: filterText}">{{ item.label }}</li>

https://long2know.com/2016/11/angular2-filter-pipes/

0 голосов
/ 14 января 2019

Вы не должны использовать каналы для фильтрации или сортировки списков:

https://angular.io/guide/pipes#no-filter-pipe

Команда Angular и многие опытные разработчики Angular сильно рекомендуем перенести логику фильтрации и сортировки в компонент сам по себе.

Например, вы можете преобразовать массив в наблюдаемый и применить логику фильтрации с помощью конвейерных операторов RxJS: 

Rx.Observable.from(items)
    .pipe(
         filter(item => item.size >= 1),
         map(item => "Item name: " + item.name),
         // more filtering logic
      ) 
    .subscribe(item => console.log(item))
);
0 голосов
/ 10 января 2019

Вам не нужно передавать объект, ваш канал принимает массив и логическое значение в качестве входных данных. просто попробуйте следующим образом 

<tr *ngFor="let item of items$|async|filterBy: false">
...