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

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 填充任何内容，我希望跳过它。然而，打印出白色 space 的空白 space 就在那里。

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

有人对此有什么建议吗？

提前致谢！

Answer 1

您似乎想要这样的东西：

    <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 2

如果 paragraph2 为空，你想跳过所有四行，你可以这样做：

<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

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

let arr1 = ['a', 'b', 'c', null];

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

然后只需使用您的 *ngFor 遍历 component.html 中的干净数组。

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

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.

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

How do I skip printing null elements in an array during *ngFor in Angular?

ngfor

angular