Question

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

我有一个javascript对象数组，本质上是一个数据库记录集，我在UI中将其作为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）暴露给编辑该记录集的处理函数，让angular自动更新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而不是#，因为已经有几个月了。

angular2事件侦听* NgFor迭代变量

1 个答案: