Публикует много пустых значений

Question

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

<div *ngFor="let articulo of spiderService.articulos">
    <div *ngIf="articulo.titulo.includes(target.nombre)">
        <p *ngIf="true">{{articulo.titulo}} - test</p>
    </div>
</div>

Моя проблема в том, что у меня более 3200 статей, и я загружаю следующий код:

<div _ngcontent-c1="" class="card-stacked  col s12"></div>

Этот div генерируется мной 15 раз, то есть количество целей, которые у меня есть в базе данных, и в пределахВ этом div я генерирую еще 3200 делений по одному на статью, если заголовок статьи совпадает с названием цели, она показывает меня идеально на экране, но те, которые не совпадают, генерируют этот пустой div, что доставляет мне много проблем длядизайн и др.

любое решение?

Answer 1

Вы можете разбить spiderService.articulos на несколько массивов (targetName1Articles, targetName2Articles и т. Д.).Вы будете заполнять эти массивы в ngInit.Делая это, вы можете добавить в стекированную карту ngIf, проверяющую, имеет ли длина этого массива> 0, например:

<div _ngcontent-c1="" class="card-stacked  col s12" *ngIf="target1Articles && target1Articles.length > 0"></div>

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