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

#angular #angular10

Вопрос:

Я создал приложение для отображения элементов из 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 и вложенный для каждого элемента в категории.

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

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

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

Ответ №1:

Я давно не работал с 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>