将 ngFor 变量传递给 ngIf 模板

Posted

技术标签:

【中文标题】将 ngFor 变量传递给 ngIf 模板【英文标题】:Passing ngFor variable to an ngIf template 【发布时间】:2018-06-20 15:07:21 【问题描述】:

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

【问题讨论】:

@Guntram:你能添加任何演示链接吗?因为我收到空白回复。谢谢 我把它移到了答案中...... 【参考方案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

【讨论】:

谢谢 - 我在 ngTemplateOutlet 上看过文档,但没有设法理解这种情况 - 看到一个工作示例可以清楚地了解如何使用它! @match,很高兴你弄清楚了,它有时会发生 :),祝你编码愉快。【参考方案2】:

看这里:Pass variable in Angular 2 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>

【讨论】:

这是一个笨蛋:***.com/questions/40418598/…【参考方案3】:

这是因为模板作用域的工作方式。 Angular 中的模板具有动态作用域而不是常规的 javascript 词法作用域,这意味着,ng-template 中的 number 表达式没有指向 number 中的 number 变量,尽管你应该认为它会因为你're kinda evalating &lt;ng-container&gt; 所在的模板表达式。

如果您实际上在您的AppComponent 中定义了一个number 属性,比如说number = 42,您可以看到&lt;ng-template&gt; 中的所有number 表达式的计算结果为42

因此,您应该在*ngFor 的范围内定义模板,其中number 变量具有所需的值,或者以某种方式将此值传递给even_tplodd_tpl。正如@Vivek 所指出的,您可以使用ngTemplateOutletngTemplateOutletContext 来做到这一点。

【讨论】:

【参考方案4】:

这里有更多(类似)多个参数的选项,这个选项包括使用 '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>

【讨论】:

【参考方案5】:

所有答案都使用相同的键值名称,所以乍一看,这让我感到困惑。

这里是 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>

【讨论】:

以上是关于将 ngFor 变量传递给 ngIf 模板的主要内容,如果未能解决你的问题,请参考以下文章

访问 *ngIf 中的模板变量

将右元素的数据从ngfor循环传递给子组件

*ngIf 和局部模板变量

将 ngModel 模板引用变量作为 AbstractControl 传递给输入变量

Grails 不会将变量传递给嵌套模板

Django将变量传递给模板