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>

しかし、ファセットはアンカータグでは利用できず、タグ内のテンプレートでのみ利用できます<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]>、制限を回避できる両方の構造タグの 1 つに正規形を使用することで省略形です。

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngForも参照してください

于 2016-04-21T07:13:54.230 に答える
0

同じ要素でngIfandを使用することはできません。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 に答える