将 ngFor 变量传递给 ngIf 模板
Passing ngFor variable to an ngIf template
如果使用具有 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
,但如果内联使用它会起作用。
以下 link 中工作版本和非工作版本的完整示例:plunkr
你只需要使用 [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>
看这里:
<div *ngFor="foo in foos">
<ng-container *ngTemplateOutlet="inner; context:{name:foo}"></ng-container>
</div>
<ng-template #inner let-name="name">
{{ name }}
</ng-template>
这是因为模板作用域的工作方式。 Angular 中的模板具有动态作用域而不是常规的 javascript 词法作用域,这意味着 ng-template
中的 {{ number }}
表达式未指向相同的 number
变量在你的 *ngFor
中,虽然人们应该认为它会,因为你有点 评估 模板表达式,其中 <ng-container>
是。
如果你实际上在你的 AppComponent
中定义了一个 number
属性,比方说 number = 42
,你可以看到 {{number}}
中的所有表达式 <ng-template>
的计算结果为 42
.
因此,您应该在 *ngFor
范围内定义模板,其中 number
变量具有所需的值,或者以某种方式将此值传递给 even_tpl
和 odd_tpl
。正如@Vivek 指出的那样,您可以使用 ngTemplateOutlet
和 ngTemplateOutletContext
.
这里有多个(类似的)多个参数的选项,这个选项包括使用 '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>
所有答案都使用相同的键值名称,所以乍一看,这让我很困惑。
这里是 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>
如果使用具有 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
,但如果内联使用它会起作用。
以下 link 中工作版本和非工作版本的完整示例:plunkr
你只需要使用 [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>
看这里:
<div *ngFor="foo in foos">
<ng-container *ngTemplateOutlet="inner; context:{name:foo}"></ng-container>
</div>
<ng-template #inner let-name="name">
{{ name }}
</ng-template>
这是因为模板作用域的工作方式。 Angular 中的模板具有动态作用域而不是常规的 javascript 词法作用域,这意味着 ng-template
中的 {{ number }}
表达式未指向相同的 number
变量在你的 *ngFor
中,虽然人们应该认为它会,因为你有点 评估 模板表达式,其中 <ng-container>
是。
如果你实际上在你的 AppComponent
中定义了一个 number
属性,比方说 number = 42
,你可以看到 {{number}}
中的所有表达式 <ng-template>
的计算结果为 42
.
因此,您应该在 *ngFor
范围内定义模板,其中 number
变量具有所需的值,或者以某种方式将此值传递给 even_tpl
和 odd_tpl
。正如@Vivek 指出的那样,您可以使用 ngTemplateOutlet
和 ngTemplateOutletContext
.
这里有多个(类似的)多个参数的选项,这个选项包括使用 '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>
所有答案都使用相同的键值名称,所以乍一看,这让我很困惑。
这里是 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>