Question

我正在尝试写一个寻呼机。

如果<li>，我不想将number=-1元素放到dom中。

我无法在ngIf内写ngFor，所以如果有人能按照我的方式向我表示感谢。

以下是我想要改进的内容：

<li *ngFor="let number of pagerArray" class="page-item">
  <a class="page-link" href="#">{{number}}</a>
</li>

Answer 1

使用ng-container：

是一个逻辑容器，可用于对节点进行分组但不会在DOM树中呈现为节点。

<ng-container *ngFor="let number of pagerArray">
    <li *ngIf="number != -1"  class="page-item">
        <a class="page-link" href="#">{{number}}</a>
    </li>
</ng-container>

Answer 2

您可以使用array.filter()：

在您的组件中：

getPagerArray(){
    return this.pagerArray.filter((num) => {
        return num >= 0;
    });
}

在你的模板中：

<li *ngFor="let number of getPagerArray()" class="page-item">
    <a class="page-link" href="#">{{number}}</a>
</li>

Answer 3

您可以通过多种方式实施。
一种方法是你可以在标签上设置* ngIf

<li *ngFor="let number of pagerArray" class="page-item">
    <a class="page-link" href="#" *ngIf='number != -1'>
        {{number}}
    </a>
</li>

另一种方法是添加自己的过滤器，如下所示

<li *ngFor="let number of pagerArray | yourFilter" class="page-item">
    <a class="page-link" href="#">
        {{number}}
    </a>
</li>

在ngFor语句中没有显示li

3 个答案: