代码之家 › 专栏 › 技术社区 › match

将ngFor变量传递给ngIf模板

ng-template angular-ng-if ngfor angular

26

match · 技术社区 · 7 年前

如果ngFor循环中的当前变量使用带有then/else语法的模板,如何将其传递给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

5 回复 | 直到 7 年前

1

32

Vivek Doshi 7 年前

您只需使用 [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

2

5

Vega Stipe 6 年前

看这里: 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>

3

1

Osman Cea 7 年前

这是因为模板作用域的工作方式。Angular中的模板具有动态范围,而不是常规javascript词法范围,这意味着 {{ number }} 中的表达式 ng-template 不是指向相同的 number 中的变量 *ngFor 虽然有人会这么想,因为你评价模板表达式,其中 <ng-container> 是

如果您实际定义 数字 您的 AppComponent ,比如说 number = 42 ,您可以看到 {{number}} 内部表达式 <ng-template> 计算结果为 42 .

因此,您应该在 *ngFor公司 ,其中 数字 变量具有所需的值,或者以某种方式将此值传递给两者 even_tpl 和 odd_tpl . 正如@Vivek所指出的,你可以用 ngTemplateOutlet 和 ngTemplateOutletContext .

4

0

Felix 5 年前

对于多个参数,这里有几个(类似的)选项,其中包括使用“ngTemplateOutletContext”和一个条件(在第四个参数中-为了好玩)。

... 应通过复制和粘贴工作。。。

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

0

lwin 4 年前

所有答案的键值都使用相同的名称,所以乍看之下,我很困惑。

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