Question

我正在使用此软件包在我的应用中创建一个popover：
https://github.com/pleerock/ng2-popover
问题是我有一个表ngFor的表用于数据，所以我需要不同的弹出窗口用于不同的行。这是代码：

<div class="dt-row" *ngFor="let key of keys">
  <popover-content #actions
                   title="Actions"
                   placement="bottom"
                   [animation]="false"
                   [closeOnClickOutside]="true"
                   [closeOnMouseOutside]="false"
                   [disabled]="false"
                   [onHover]="false">
    <a>Edit</a>
    <a>Delete</a>
  </popover-content>

  <div [popover]="actions">
    ...
  </div>
</div>

因此actions ref对所有ngFor个实例都相同。
我怎样才能让那个参考动态？类似于[ref]="'actions-' + key.id"。

Answer 1

评论建议您使用索引：

<div class="dt-row" *ngFor="let key of keys; let i = index;">
            <popover-content #i
                             title="Actions"
                             placement="bottom"
                             [animation]="false"
                             [closeOnClickOutside]="true"
                             [closeOnMouseOutside]="false" >
              {{key.interestingInfo}}
                <a>Edit - {{key.name}}</a>
                <a>Delete - {{key.name}}</a>
            </popover-content>

            <div [popover]="i">
                {{key.clickText + key.name}}
            </div>
    </div>
</div>

这里有一个链接到一个工作的plunker，演示弹出内容有不同的内容： http://plnkr.co/edit/kVJSnn?p=preview

Angular 2元素动态参考

1 个答案: