2

我正在尝试在 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 > 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>标签内的模板中可用，我怎样才能实现相同，有什么解决方案。

4

2 回答 2

3

*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

于 2016-04-21T07:13:54.230 回答
0

你不能在同一个元素上使用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是一个结构指令，而 using*ngFor是使用template标签的方法的语法快捷方式。

有关更多详细信息，您可以查看“* 和”部分中的此链接：

于 2016-04-21T07:13:22.183 回答