Angular-ng-template，参数在 ngIf 内，参数在 ngFor 内

我正在尝试构建这个模板:

<ul>
<li *ngFor='let link of links'>
<ng-container *ngIf="link.type == 'complex'; then complexLink else simpleLink"></ng-container>
</li>
</ul>


<ng-template #simpleLink>
...
{{ link.some_property }}
</ng-template>


<ng-template #complexLink>
...
{{ link.some_property }}
</ng-template>

问题是 link 变量在 ng-template 中是未定义的，所以我在访问未定义的‘ some _ property’时出错。

我正在努力理解如何将 link 变量从 ngFor 传递到 ng-template

如果能知道这个问题是否有多种解决方案，那就太好了。

100411 次浏览

小开

最佳答案

你可以这样做:

<ul>
<li *ngFor='let link of links'>
<ng-container
[ngTemplateOutlet]="link.type == 'complex' ?complexLink : simpleLink"
[ngTemplateOutletContext]="{link:link}">
</ng-container>
</li>
</ul>


<ng-template #simpleLink let-link='link'>
Simple : \{\{ link.name }}
</ng-template>


<ng-template #complexLink let-link='link'>
Complex : \{\{ link.name }}
</ng-template>

正在演示

小开

你可以这样使用它

<ul>
<li *ngFor='let link of links'>
<ng-container *ngIf="link.type == 'complex'; then complexLink else simpleLink"></ng-container>


<ng-template #simpleLink>
... \{\{ link.some_property }}
</ng-template>


<ng-template #complexLink>
... \{\{ link.some_property }}
</ng-template>
</li>
</ul>