问题
I am trying to build this template:
<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>
The problem is that the link variable is undefined inside the ng-template so I get an error of accessing 'some_property' of undefined.
I am struggeling to understand how I pass the link variable from the ngFor to the ng-template
It would be great to know if there are multiple solutions for this problem.
回答1:
You can do it like :
<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>
WORKING DEMO
回答2:
You can use it in this way
<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>
来源:https://stackoverflow.com/questions/48515267/angular-ng-template-with-parameter-inside-ngif-inside-ngfor