ngFor内部的动态模板参考变量（Angular 9）

如何在元素内声明动态 模板引用变量ngFor？

我想使用ng-bootstrap中的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>

嗯...有什么主意吗？

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

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

<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

柱塞示例

有关更多详细信息，请参见：

• angular-带选择器的ng-content中的条件重复templateref

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

在该答案中，他们使用：

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

构建那些动态生成的组件的列表。强烈建议您检查一下！

允许这种情况的另一种方法是创建一个包装按钮和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>

你可以用trackBy: trackByFn在*ngFor

<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>