如何在ngFor元素中声明动态模板引用变量？
我想使用ng-bootstrap中的popover组件,popover代码(带有Html绑定)如下所示：
<ng-template #popContent>Hello,<b>{{name}}</b>!</ng-template>
<button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
I've got markup and bindings in my popover!
</button>
如何在ngFor中包含这些元素？
<div *ngFor="let member of members">
<!-- how to declare the '????' -->
<ng-template #????>Hello,<b>{{member.name}}</b>!</ng-template>
<button type="button" class="btn btn-secondary" [ngbPopover]="????" popoverTitle="Fancy content">
I've got markup and bindings in my popover!
</button>
</div>
嗯……任何想法？
模板引用变量的范围限定在它们定义的模板中.结构指令创建嵌套模板,因此引入了单独的范围.
原文链接：https://www.f2er.com/angularjs/143968.html因此,您只需使用一个变量作为模板参考
<div *ngFor="let member of members">
<ng-template #popupContent>Hello,<b>{{member.name}}</b>!</ng-template>
<button type="button" class="btn btn-secondary" [ngbPopover]="popupContent" popoverTitle="Fancy content">
I've got markup and bindings in my popover!
</button>
</div>
它应该工作,因为它已经在< ng-template ngFor中声明了 Plunker Example
有关详细信息,请参阅：
> angular – conditional duplicate templateref in ng-content with selector
