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它使我在屏幕上看起来很完美，但是那些不匹配的东西会产生空的div，这给我带来了很多设计等方面的问题。

任何解决方案？

Answer 1

您可以将spiderService.articulos分成几个数组（targetName1Articles，targetName2Articles等）。您将在ngInit上填充这些数组。为此，您可以在卡堆中添加一个ngIf，例如检查此数组的长度是否大于0：

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

希望它可以为您提供帮助

发布许多空值

1 个答案: