NgFor (角度9)中的动态模板引用变量

如何在 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>

嗯... 有什么想法吗？

97360 次浏览
小开

模板引用变量的作用域限定在定义它们的模板中。结构化指令创建一个嵌套的模板，因此引入了一个单独的作用域。

因此，您可以只使用一个变量作为模板引用

<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中声明了

普朗克的例子

详情请参阅:

小开

这是我找到的最好的解决方案: https://stackoverflow.com/a/40165639/3870815

他们的回答是:

@ViewChildren('popContent') components:QueryList<CustomComponent>;

要构建这些动态生成的组件的列表，强烈建议您查看它！

小开

可以在 *ngFor中使用 trackBy: trackByFn

<div *ngFor="let member of members;trackBy: trackByF">
<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 的组件

<div *ngFor="let member of members">
<popover-button [member]="member"></pop-over-button>
</div>

弹出按钮组件中包含以下内容

<ng-template #popContent>Hello, <b>\{\{member.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>

提交答案