Проходження змінної ngFor до шаблону ngIf - кутовий, ngfor, ngif, ng-шаблон

Як передати поточну змінну в циклі ngFor до ngIf, якщо вона використовує шаблони з синтаксисом then / else?

Схоже, що вони проходять через штраф, коли використовуються вбудовано, але не доступні з шаблону, наприклад:

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

Шаблони не мають доступу до number взагалі, але він працює, якщо використовується inline.

Повний приклад робочих і неробочих версій у наступному посиланні: планкр

Відповіді:

Все, що вам потрібно, це використовувати [ngTemplateOutletContext] Докладніше

Ось як можна досягти цього:

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

РОБОЧИЙ ДЕМО

Послухайте: Передати змінну в шаблоні кута 2

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

Це тому, що спосіб роботи сфери шаблону. Шаблони в Angular мають динамічну область замість звичайної javascript лексичної області, це означає, що {{ number }} вираз всередині ng-template не вказує на те ж саме number змінна в твоїй *ngFor, хоча треба думати, що це було б з тих пір, як ви оцінювання вираз шаблону де <ng-container> є

Якщо ви дійсно визначите a number нерухомість у вашому AppComponent, скажімо number = 42Ви можете бачити, що все {{number}} вирази всередині <ng-template> оцінює до 42.

Таким чином, або ви повинні визначити свої шаблони всередині області *ngFor, де number змінна має бажане значення, або якось передає це значення обом even_tpl і odd_tpl. Як зазначив @ Vivek, ви можете це зробити ngTemplateOutlet і ngTemplateOutletContext.