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

工作演示

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>