[英]Passing ngFor variable to an ngIf template
How do I pass the current variable in an ngFor loop to ngIf, if it is using templates with then/else syntax?如果使用带有 then/else 语法的模板,如何将 ngFor 循环中的当前变量传递给 ngIf?
It appears that they pass through fine when used inline, but aren't accessible from a template, for example:内联使用时它们似乎可以正常通过,但无法从模板访问,例如:
<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>
The templates don't seem to have access to number
at all, but it works if used inline.模板似乎根本无法访问number
,但如果使用内联则它可以工作。
A full example of the working and not-working versions in the following link: plunkr以下链接中工作和不工作版本的完整示例: plunkr
All you need is to use [ngTemplateOutletContext]
Read More您只需要使用[ngTemplateOutletContext]
阅读更多
Here is the way how you can achieve that :这是您如何实现这一目标的方法:
<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>
look here: Pass variable in Angular 2 template看这里: 在 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>
It's because the way template scope works.这是因为模板范围的工作方式。 Templates in Angular have dynamic scope instead of regular javascript lexical scope, that means, the {{ number }}
expression inside the ng-template
is not pointing to the same number
variable in your *ngFor
, although one should think it would since you're kinda evaluating the template expression where <ng-container>
is. Angular 中的模板具有动态范围而不是常规的 javascript 词法范围,这意味着ng-template
的{{ number }}
表达式没有指向*ngFor
的相同number
变量,尽管人们应该认为它会因为你重新评估<ng-container>
所在的模板表达式。
If you actually define a number
property in your AppComponent
, let's say number = 42
, you can see that all the {{number}}
expressions inside <ng-template>
evaluates to 42
.如果您实际上在AppComponent
定义了一个number
属性,例如number = 42
,您可以看到<ng-template>
中的所有{{number}}
表达式的计算结果为42
。
So either you should define your templates inside the scope of the *ngFor
, where the number
variable has the desired value, or somehow pass this value to both even_tpl
and odd_tpl
.因此,要么您应该在*ngFor
的范围内定义模板,其中number
变量具有所需的值,或者以某种方式将此值传递给even_tpl
和odd_tpl
。 As @Vivek has pointed out, you can do this with ngTemplateOutlet
and ngTemplateOutletContext
.正如@Vivek 指出的那样,您可以使用ngTemplateOutlet
和ngTemplateOutletContext
来做到这ngTemplateOutletContext
。
Here are couple more (similar) options for multiple arguments, this one includes using 'ngTemplateOutletContext' and also a condition (in 4th argument - for fun).以下是多个参数的更多(类似)选项,这个选项包括使用 'ngTemplateOutletContext' 和一个条件(在第四个参数中 - 为了好玩)。
... should work by copy and paste ... ...应该通过复制和粘贴来工作...
<!-- 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>
All answers use the same name for key-value, So at the first look, it makes me confuse.所有答案都使用相同的键值名称,所以乍一看,这让我感到困惑。
Here working example for Angular 10这里是 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.