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

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

您不能在同一元素上使用 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 标记的方法的语法快捷方式。

有关更多详细信息，您可以在“* 和”部分查看 link：

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

Answer 2

*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

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

Accessing local variable in HTML template using *ngFor in Angular 2

angular

ngfor

angular-template