一起使用 ng-template 和 ngIf，其中 ngIf 可以访问 paased 参数

Question

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

_{PS. sample code from Vivek Doshi's answer here} .

but what I'm looking for is to only go-inside ng-template when a condition meets, something like this:

<ng-template #odd_tpl let-number='number' *ngIf="number > 10">
  <li>Odd: {{number}}</li>  
</ng-template>

but it is showing an error:

Identifier 'number' is not defined. The component declaration, template variable declarations, and element references do not contain such a member ng .

I want to access the passed argument number , is this possible?

Answer 1

So as per yurzui commented I've used ng-container, previously there was some element getting added to the DOM but it was a mistake which I fixed and now things are works just fine.

I can check for the condition like this -

<ng-template #odd_tpl let-number='number'>
   <ng-container *ngIf="number > 10">
     <li>Odd: {{number}}</li>  
   </ng-container>
</ng-template>