Przekazywanie zmiennej ngFor do szablonu ngIf - kątowego, ngfor, ngif, ng-template

Jak przekazać bieżącą zmienną w pętli ngFor do ngIf, jeśli używa ona szablonów ze składnią then / else?

Wygląda na to, że przechodzą one poprawnie, gdy są używane w wierszu, ale nie są dostępne z szablonu, na przykład:

<ul *ngFor="let number of numbers">
<ng-container *ngIf="number % 2 == 0; then even_tpl; else odd_tpl"><>/ng-container>
</ul>


<ng-template #odd_tpl>
<li>Odd: {{number}}</li>
</ng-template>

<ng-template #even_tpl>
<li>Even: {{number}}</li>
</ng-template>

Szablony nie wydają się mieć dostępu number w ogóle, ale działa, jeśli jest używany inline.

Pełny przykład działających i niedziałających wersji w następującym łączu: plunkr

Odpowiedzi:

Wszystko czego potrzebujesz to użyć [ngTemplateOutletContext] Czytaj więcej

Oto sposób, w jaki można to osiągnąć:

<div>
<h3>All Templates</h3>
<ul *ngFor="let number of numbers">
<ng-container [ngTemplateOutlet]="number % 2 == 0 ? even_tpl : odd_tpl" [ngTemplateOutletContext]="{number:number}"></ng-container>
</ul>
</div>

<ng-template #odd_tpl let-number="number">
<li>Odd: {{number}}</li>
</ng-template>

<ng-template #even_tpl let-number="number">
<li>Even: {{number}}</li>
</ng-template>

DEMO PRACY

Popatrz tutaj: Przekaż zmienną w szablonie Angular 2

<div *ngFor="foo in foos">
<ng-container *ngTemplateOutlet="inner; context:foo"></ng-container>
</div>
<ng-template #inner let-name="name">
{{ name }}
</ng-template>

Dzieje się tak, ponieważ działa zakres szablonów. Szablony w Angular mają zakres dynamiczny zamiast zwykłego zakresu leksykalnego javascript, co oznacza, że {{ number }} wyrażenie wewnątrz ng-template nie wskazuje na to samo number zmienna w twoim *ngFor, chociaż należy myśleć, że tak, ponieważ jesteś trochę oceniać wyrażenie szablonu gdzie <ng-container> jest.

Jeśli faktycznie zdefiniujesz number własność w twoim AppComponent, powiedzmy number = 42, możesz zobaczyć, że wszystkie {{number}} wyrażenia w środku <ng-template> ocenia na 42.

Więc albo powinieneś zdefiniować swoje szablony w zasięgu *ngFor, gdzie number zmienna ma żądaną wartość lub w jakiś sposób przekazuje tę wartość do obu even_tpl i odd_tpl. Jak zauważył @Vivek, możesz to zrobić za pomocą ngTemplateOutlet i ngTemplateOutletContext.