Доступ к локальной переменной в шаблоне HTML с использованием *ngFor в Angular 2

Я пытаюсь использовать ngFor в Angular 2, пример кода ниже

<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>, как я могу добиться того же, каково решение.


angular ngfor angular-template
person Prakash    schedule 21.04.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

*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

person Günter Zöchbauer    schedule 21.04.2016

arrow_upward
0
arrow_downward

Вы не можете использовать 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.

Более подробно вы можете посмотреть по этой ссылке в разделе "* и ":

person Thierry Templier    schedule 21.04.2016