Блог

У меня есть набор элементов, которые я хочу разделить на разные разделы, такие как разделы A, B и C. Когда пользователь выполняет поиск по имени, он обновляет представление каждого раздела на основе их поиска. Это мой компонент HTML ( allItems = [{name:"someName", "items":Items[]}, {name:"someName2", "items":Items[]}, ...] ):

 <ng-container *ngFor="let itemSection of allItems ">
    <div class="section-title">{{itemSection.name}}</div>
    <ul class="item-grid">
        <ng-container *ngFor="let item of itemSection.items | itemFilter : searchText : searchType">
            <li class="item" (click)="addItem(item)">
                <div class="item-block">
                    <div class="bg-black" [ngClass]="isVisibleClass(item)">
                        <img class="item-img" [src]="item.img" />
                    </div>
                </div>
            </li>
        </ng-container>
    </ul>
</ng-container>
 

По itemSection мере роста числа «s» он применяет несколько к одному и тому же каналу фильтрации к каждому из этих разделов, что делает его запаздывающим из-за постоянной фильтрации разных элементов. Я бы предпочел применить один itemFilter канал ко всем элементам, добавить к нему соответствующий div , а затем отобразить его:

 <div id="a"></div>
<div id="b"></div>
<ng-container *ngIf="items$ | async as items">
    <ng-container *ngFor="let item of items | itemFilter : searchText : searchType">
        if item section == "a", put in div a
        else if item section == "b", put in div b
        ...
    </ng-container>
</ng-container>
then render the contents of div a and b
 

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