如果使用带有 then/else 语法的模板，如何将 ngFor 循环中的当前变量传递给 ngIf？
看起来它们在内联使用时可以通过，但不能从模板访问，例如：
<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，但如果内联使用它就可以工作。
以下链接中的工作和不工作版本的完整示例：plunkr
您只需要使用[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>
<div *ngFor="foo in foos">
<ng-container *ngTemplateOutlet="inner; context:{name:foo}"></ng-container>
</div>
<ng-template #inner let-name="name">
{{ name }}
</ng-template>
这是因为模板范围的工作方式。Angular 中的模板具有动态作用域而不是常规的 javascript 词法作用域，这意味着{{ number }}内部的表达式ng-template并没有指向您的 中的相同number变量*ngFor，尽管人们应该认为它会因为您有点评估模板表达式 where <ng-container>is
如果您实际上在 中定义了一个number属性，AppComponent比如说number = 42，您可以看到{{number}}里面的所有表达式都<ng-template>计算为42。
*ngFor因此，要么您应该在number变量具有所需值的范围内定义模板，要么以某种方式将此值传递给even_tpland odd_tpl。正如@Vivek 指出的那样，您可以使用ngTemplateOutletand来做到这一点ngTemplateOutletContext。
这里有多个参数的更多（类似）选项，这个选项包括使用“ngTemplateOutletContext”和一个条件（在第 4 个参数中 - 为了好玩）。
...应该通过复制和粘贴来工作...
<!-- DEMO using:
"=templateID; context:{prop:value, ...}"
( 4 arguments demo)
Note: $implicit identifies the default argument in the template.
The template does not need to assign the argument name,
- see the 3rd argument
-->
<div *ngFor="let item of ['Aaa', 'Bbb', 'Ccc']; index as ix">
<ng-container *ngTemplateOutlet="myTemplate1;
context:{cDemoName:'Option 1:',
cIx:ix+1,
$implicit:item,
cIsEven: ((ix % 2) === 0) ? 'true' : 'false' }">
</ng-container>
</div>
<hr>
<!-- DEMO using:
[ngTemplateOutlet]="templateID"
[ngTemplateOutletContext]="{"=templateID; context:{prop:value, ...}"
-->
<div *ngFor="let item of ['Dddd', 'Eee', 'Fff']; index as ix">
<ng-container [ngTemplateOutlet]="myTemplate1"
[ngTemplateOutletContext]="{
cDemoName:'Option 2',
cIx:ix+1,
$implicit:item,
cIsEven: ((ix % 2) === 0) ? 'true' : 'false' }
">
</ng-container>
</div>
<!-- DEMO template:
( 4 arguments expected)
-->
<ng-template #myTemplate1
let-cDemoName="cDemoName"
let-cIx="cIx"
let-cItem
let-cIsEven="cIsEven">
Context arguments demo name: {{cDemoName}} <br>
. . . . . Context index: {{cIx}} <br>
. . . . . Context item: --- {{ cItem }} --- <br>
. . . . . Context is-even: {{ cIsEven }} <br>
<br>
</ng-template>
所有答案都使用相同的键值名称，所以乍一看，这让我感到困惑。
这里是 Angular 10 的工作示例
<div *ngFor="let data of dataList">
<ng-container *ngTemplateOutlet="data.istruevalue ? truevalue : falsevalue ; context: { passdata:data}"></ng-container>
</div>
<ng-template #truevalue let-info="passdata">
<label >true : {{info.name}}</label><br>
</ng-template>
<ng-template #falsevalue let-info="passdata">
<label >false : {{info.name}}</label><br>
</ng-template>