angular2事件监听* NgFor迭代变量

Question

我一直在探索angular2作为解决特定数据绑定挑战的方法。

我有一个javascript数组的对象，本质上是一个数据库记录集，我作为一个html表格呈现在用户界面中。我在每一行上有各种菜单和输入以允许用户修改底层记录集。

整个工作流程是用户从外部数据库加载记录集，在UI中操作它，然后将编辑提交回数据库。

下面是数据表组件的打字稿代码片段：

@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); 
    } 

} 

我和如何使用模板中定义的事件监听器传递一个句柄的JavaScript对象drToggle()挣扎。

我想揭露底层javascript数组（记录集ee_data）到一个处理函数，该函数编辑该记录集，留下角度来自动更新html。

但是，我似乎只能通过$ event关键字。我可以想象，询问$event.target以获得父母<tr>，然后查看其<td>元素的html值以找到足够的信息来查找javascript对象中的相应记录，但这看起来很迂回。

在ts模板中，有一个迭代变量#ee，用于从javascript数组构建出html表。有什么办法可以直接将这个相同的#ee变量传递给我的事件监听器吗？

Answer 1

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

您只需通过迭代变量ee

的语法*ngFor来声明一个变量是let而不是#因为几个月了。