angular - 将 ngFor 变量传递给 ngIf 模板

Question

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

Answer 1

您只需要使用[ngTemplateOutletContext] Read More

以下是实现该目标的方法:

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

WORKING DEMO