Question

使用ng-for时如何过滤元素？

<tr>
    <td *ng-for="#col of columns" ><a (click)="sort(col.name)">{{col.title}}</a></td>
</tr>

当col.visible为false时，我不想创建元素

我如何在Angular2中执行此操作？

Answer 1

您可以使用管道过滤数据，以便*ngFor仅使用子集，如

中所述

How to apply filters to *ngFor

或者您可以将*ngIf与*ngFor一起使用，但不允许在同一元素上使用<IfModule mod_security.c> SecFilterInheritence Off SecFilterScanPOST Off。如何在*ngIf and *ngFor on same element causing error

中解释如何一起使用它们

Answer 2

使用 ngIf 指令。 col.visible = true 表示只添加td，否则不会在tr中添加。

ngIf指令删除或重新创建DOM树的一部分基于{表达式}。如果分配给ngIf的表达式求值如果为false，则从DOM中删除该元素，否则为a 将元素的克隆重新插入DOM。

<tr>
    <td ng-if="col.visible" ng-for="#col of columns" ><a ng-click="sort(col.name)">{{col.title}}</a></td>
</tr>

Answer 3

在这种情况下，最简单的方法是确保只使用col.visible === true的col对象填充column数组。

在控制器类中执行此操作将解决此问题，而无需任何标记过滤器或其他特定于框架的依赖项。

Answer 4

Angular2语法有所改变。对于发行版，* ngIf的语法是：

<div class="row pre-scrollable" *ngIf="count > 0">
    <div *ngFor="let image of results">
        {{image.title}}
    </div>
</div>

结果是一些具有标题和计数的对象的数组是该数组中的项目数。

在这种情况下，div用于具有可滚动的结果列表，如果没有结果，则隐藏滚动条。

Angular2中的Angular2隐藏元素

4 个答案: