Question

我正在尝试在Angular 2中使用ngFor，下面是示例代码

<a *ngFor="#facet of facet_data" class="collection-item" (click)="setToSearchBarWithFilter(facet.category)">
  {{facet.category}}<span class="badge">{{facet.count}}</span>
</a>

我想在锚标记中应用* ngIf以仅显示具有facet.count＆gt;的那些标记。 0，像这样：

<a *ngFor="#facet of facet_data" class="collection-item" (click)="setToSearchBarWithFilter(facet.category)" *ngIf="facet.count > 0">
  {{facet.category}}<span class="badge">{{facet.count}}</span>
</a>

但是facet在锚标签中不可用，它仅在<a>标签内的模板中可用，我如何实现相同，解决方案是什么。

Answer 1

*ngFor和*ngIf不支持同一标签。

改为使用：

  <ng-container *ngFor="let facet of facet_data">
    <a class="collection-item" (click)="setToSearchBarWithFilter(facet.category)" *ngIf="facet.count > 0">
    {{facet.category}}<span class="badge">{{facet.count}}</span> 
    </a>
  </ng-container>

<ng-container>是一个没有标记到DOM的辅助元素。

仍然支持但不推荐，因为语法混乱：

<击>

  <template ngFor let-facet [ngForOf]="facet_data">
    <a class="collection-item" (click)="setToSearchBarWithFilter(facet.category)" *ngIf="facet.count > 0">
    {{facet.category}}<span class="badge">{{facet.count}}</span> 
    </a>
  </template>

*ngFor是<template ngFor [ngForOf]>的简写，通过使用规范形式表示您可以解决限制的两个结构标记之一。

<击>

另见https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngFor

Answer 2

您不能在同一元素上使用ngIf和ngFor。

您可以对ngFor使用基于模板的方法：

<template ngFor #facet [ngForOf]="facet_data">
  <a class="collection-item" 
       (click)="setToSearchBarWithFilter(facet.category)">
    {{facet.category}}<span class="badge">{{facet.count}}</span>
  </a>
</template>

实际上ngFor是一个结构指令，使用*ngFor是使用template标记的方法的语法快捷方式。

有关详细信息，您可以在＆＃34; *和＆＃34;部分中查看此链接：

https://angular.io/docs/ts/latest/guide/template-syntax.html

在Angular 2中使用* ngFor访问HTML模板中的局部变量

2 个答案: