Angular 2 Element dynamisch ref

Question

Ich verwende dieses Paket eine popover in meiner App zu erstellen:
https://github.com/pleerock/ng2-popover
Das Problem ist, ich eine Tabelle für Daten mit ngFor haben, also muss ich verschiedene popovers für verschiedene Zeilen. Hier ist der Code:

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

So actions ref ist gleich für alle ngFor Instanzen.
Wie kann ich das ref dynamisch machen? So etwas wie [ref]="'actions-' + key.id".

Answer 1

Wie der Kommentar empfiehlt Ihnen, den Index verwenden würde:

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

Und hier ist ein Link zu einem Arbeits Plunker das Popup-Inhalt demonstriert hat unterschiedliche Inhalte: http://plnkr.co/edit/kVJSnn?p=preview