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

您只需使用git checkout *filename* Read More

以下是实现这一目标的方法：

[ngTemplateOutletContext]

<强> WORKING DEMO

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

Answer 3

这是因为模板范围的工作方式。 Angular中的模板具有动态范围而不是常规的javascript词法范围，这意味着{{ number }}内的ng-template表达式未指向number中的同一*ngFor变量，虽然你应该认为这是因为你有点评估 <ng-container>所在的模板表达式。

如果您在number中实际定义了AppComponent属性，请说number = 42，您可以看到{{1}内的所有{{number}}个词组评估为<ng-template>。

因此，您应该在42范围内定义模板，其中*ngFor变量具有所需的值，或以某种方式将此值传递给number和{{1 }}。正如@Vivek指出的那样，您可以使用even_tpl和odd_tpl执行此操作。

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

Answer 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模板

5 个答案: