使用* ngFor在Angular2

Question

我想在angularjs2使用ngFor访问局部变量在HTML模板，下面

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

但方面是不具备的锚标记，它只是在<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标签的方法语法快捷方式。

有关详细信息，你可以看看在这部分链接“*和”：

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