将ngFor变量传递给ngIf模板

Question

如果ngFor循环使用带有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>

模板似乎根本无法访问数字，但如果内联使用，它可以工作。

在下面的链接中有一个工作和不工作版本的完整例子

Answer 1

这是因为模板作用域的工作方式。Angular中的模板具有动态作用域，而不是常规的javascript词法作用域，这意味着ng-模板中的{{数字}}表达式没有指向*ngFor中相同的数字变量，尽管人们应该认为它会，因为您正在评估的模板表达式

如果您实际上在 AppComponent 中定义了一个 number 属性，假设 number = 42，您可以看到里面 的所有 {{number}} 表达式

因此，要么应该在< code>*ngFor的范围内定义模板，其中< code>number变量具有所需的值，要么以某种方式将该值传递给< code>even_tpl和< code>odd_tpl。正如@Vivek所指出的，您可以使用< code>ngTemplateOutlet和< code > ngTemplateOutletContext 来实现这一点。

Answer 2

看这里：在Angular 2模板中传递变量

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

Answer 3

您所需要的只是使用 [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>

工作演示