在Angular中的*ngFor期间，如何跳过在数组中打印null元素

Question

当我试图在Angular中输出数组的内容时，我很难从数据库中排除空条目。

<div class="container" *ngFor="let trees of (this.trees || [])"
<li>  {{trees.title}} </li>
<li>  {{trees.paragraph1}} </li>
<li>  {{trees.paragraph2}} </li>
<li>  {{trees.paragraph3}} </li>
</div>

例如，如果一个条目没有为paragraph2填充任何内容，我希望跳过它。然而，打印出空白的空白就在那里。

我已经尝试在容器中使用*ngIf="trees != null"，但它不起作用。

有人对此有什么建议吗？

提前谢谢！

Answer 1

我认为最简单、最干净的方法是首先在component.ts文件中使用array.filter():排除null值

let arr1 = ['a', 'b', 'c', null];
let arr2 = arr1.filter(i => i !== null); // will be ['a', 'b', 'c']

然后简单地使用*ngFor迭代component.html中的干净数组。

您的实现将比上面看到的稍微复杂一点，但原理是一样的：首先清理组件中的数据，让视图成为一个没有主见的消费者。

Answer 2

如果您想跳过所有四个li(如果第2段为空(，可以按如下方式执行：

<ng-container *ngFor="let tree of trees">
<div class="container" *ngIf="tree.paragraph2">
<li>{{tree.title}} </li>
<li>{{tree.paragraph1}} </li>
<li>{{tree.paragraph2}} </li>
<li>{{tree.paragraph3}} </li>
</div>
</ng-container>

Answer 3

似乎你想要这样的东西：

<div class="container" *ngFor="let tree of (this.trees || [])">
<li *ngIf="tree.title"> {{tree.title}} </li>
<li *ngIf="tree.paragraph1"> {{tree.paragraph1}} </li>
<li *ngIf="tree.paragraph2"> {{tree.paragraph2}} </li>
<li *ngIf="tree.paragraph3"> {{tree.paragraph3}} </li>
</div>

Answer 4

<ng-container *ngFor="let tree of trees">
<div class="container" *ngIf="tree!=null">
<li>{{tree.title}} </li>
<li>{{tree.paragraph1}} </li>
<li>{{tree.paragraph2}} </li>
<li>{{tree.paragraph3}} </li>
</div>
</ng-container>

also always use trackby while using ngFor so DOM doesn't gets rendered everytime.