angular2 Ereignis zuhören * NgFor iterative Variable

Question

Ich habe eckig2 als eine Möglichkeit, eine bestimmte Datenbindung Herausforderung zu lösen untersucht.

Ich habe eine Javascript-Array von Objekten, im Wesentlichen ein Datenbank-Recordset, die ich in einer Benutzeroberfläche als HTML-Tabelle präsentieren. Ich habe verschiedene Menüs und Eingaben in jeder Zeile, damit der Benutzer das zugrunde liegende Recordset ändern kann.

Der allgemeine Workflow besteht darin, dass der Benutzer ein Recordset aus einer externen Datenbank lädt, in der Benutzeroberfläche bearbeitet und die Änderungen dann an die Datenbank zurückgibt.

Unten finden Sie ein Typoskript Codeausschnitt der Datentabelle Komponente:

@Component({ 
selector: 'employee_table', 
template: ` 
     <h2>{{ title }}</h2> 
     <table> 
      <tr> 
       <th colspan=6>Name</th> 
       <th>Level</th> 
       <th>Rating</th> 
       <th>Suggested Total Pay</th> 
       <th>Total Pay Override</th> 
       <th>Comment</th> 
       <th></th> 
       <th></th> 
      </tr> 
      <tr *ngFor="#ee of ee_data" [className]=ee.tr_classes [class.selected]="ee.is_selected"> 
       <td *ngFor="#x of ee.mgmt_spacer"></td> 
       <td [attr.colspan]="[6-ee.mgmt_tier]">{{ee.name}}</td> 
       <td>{{ee.level}}</td> 
       <td>{{ee.rating}}</td> 
       <td>{{ee.suggested_tct | currency:'USD':true:'1.0-2'}}</td> 
       <td><input type="text" placeholder="e.g. $100,000"></td> 
       <td><textarea rows="1" placeholder="Explain Override" autoGrow ></textarea></td> 
       <td class="txt_btn dr_toggle_btn" 
         (click)="drToggle($event)">{{ee.show_direct && '-' || '+'}}</td> 
       <td class="txt_btn desc_toggle_btn">{{ee.show_descendants && '--' || '++'}}</td> 
      </tr> 
     <table> 
     <span class="table_return">Back to Top</span> 
      `, 
    providers: [EmployeeTableService], 
    directives: [AutoGrowDirective] 
}) 
export class EmployeeTableComponent{ 
    title: string = "Employee Data"; 
    ee_data; 

    constructor(employeeTableService: EmployeeTableService){ 
     this.ee_data = employeeTableService.getData(); 
    } 

    drToggle(event){ 
     alert('HEY! '+event.target+'; '+event.target.value); 
    } 

} 

Ich kämpfe mit, wie Sie den Ereignis-Listener in der Vorlage definiert verwenden, um ein Handle für das JavaScript-Objekt zu drToggle() passieren.

Ich möchte das zugrunde liegende JavaScript-Array (das Recordset ee_data) zu einer Verarbeitungsfunktion, die dieses Recordset bearbeitet, belassen, eckig zu lassen, um das HTML automatisch zu aktualisieren.

Es scheint jedoch, dass alles, was ich tun kann, ist, das Schlüsselwort $ event zu übergeben. Ich könnte möglicherweise $event.target verhören, um das Elternteil <tr> zu bekommen, dann schauen Sie in den HTML-Werten seiner <td> Elemente, um genügend Informationen zu finden, um den entsprechenden Datensatz im JavaScript-Objekt zu finden, aber das scheint sehr umständlich.

In der ts-Vorlage gibt es eine iterative Variable #ee, die zum Erstellen der HTML-Tabelle aus dem Javascript-Array verwendet wird. Gibt es eine Möglichkeit, die gleiche #ee Variable an meine Event-Listener direkt übergeben?

Answer 1

<tr *ngFor="let ee of ee_data" 
... 
(click)="drToggle(ee)" 

Sie können nur die Iteration passieren Variable ee

Die Syntax bereits eine Variable in *ngFor ist let statt # seit mehreren Monaten zu erklären.