Фильтровать элементы в ng-for по поиску и отображать категории для тех, у кого есть результаты

Я создал приложение для отображения элементов из JSON. У меня 1500+ элементов в большом массиве, а также в массиве массивов, содержащих элементы, отсортированные по категориям.

const fullDataSet = [{name: 'Foo', category: 'vegetable'}, {name: 'Bar', category: 'fruit'}];

const = sortedByCategory = [
[{name: 'Foo', category: 'vegetable'}, {name: 'FooBis', category: 'vegetable'}],
[{name: 'Bar', category: 'fruit'}, {name: 'Baz', category: 'fruit'}]
];

Я реализовал фильтр для поиска по атрибутам в каждом элементе, который работает на моем * ngFor.

Проблема в том, что мне нужно, чтобы элементы также были отсортированы по категориям, с заголовком для каждой категории.

Теперь у меня есть 2 цикла, по одному для каждой категории в массиве sortedByCategory и вложенный для каждого элемента в категории.

Проблема в том, что если отфильтрованные результаты пусты, имя категории все еще присутствует.

Как я могу структурировать свой код так, чтобы имена категорий отображались только тогда, когда во вложенном цикле ngFor есть элементы после фильтра? Нужна ли идея вложенных циклов и фильтров или ее можно было бы сделать более производительной?


angular angular10
person SoFolichon    schedule 13.08.2020    source источник
comment
Вы можете увидеть проблему в приложении здесь, если вы ищете случайную строку, все название категории все еще там. Я пытался передать тему фильтру, но, похоже, это не сработало, и мне было интересно, может быть, я просто не в правильном направлении.   -  person SoFolichon    schedule 14.08.2020

Ответы (1)


arrow_upward
0
arrow_downward

Я давно не работал с Angular, но вот моя идея, синтаксис может быть испорчен: D

<div *ngFor="let item of categories">
     <Category *ngIf="item.length>0" data={{item}}/>
</div>

В вашем компоненте категории:

<div *ngFor="let item of items">
     <p>{{item.name}}</p>
</div>
person Tran Loc    schedule 14.08.2020
comment
К сожалению, это не решает проблему получения длины отфильтрованных элементов: / - person SoFolichon; 19.08.2020