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

我试图在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>

{{facet.category}{{facet.count}

我想在锚定标记中应用*ngIf，以仅显示那些具有facet.count>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.category}{{facet.count}

---

但是facet在锚定标记中不可用，它仅在

标记内的模板中可用，如何实现相同的效果，解决方案是什么。

您不能在同一元素上使用

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
和
*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>



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