Question

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

嗯......好主意？

Answer 1

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

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

<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

Answer 2

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

在该答案中，他们使用：

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

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

Answer 3

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

Answer 4

您可以在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>

ngFor（Angular 2）中的动态模板引用变量

4 个答案: