javascript - angular2 事件监听 *NgFor 迭代变量

Question

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

我有一个 javascript 对象数组，本质上是一个数据库记录集，我在 UI 中将其作为 html 表显示。我在每一行上都有各种菜单和输入，以允许用户修改底层记录集。

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

下面是数据表组件的 typescript 代码片段:

@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获得 parent <tr> , 然后查看其 <td> 的 html 值元素找到足够的信息来定位javascript对象中的相应记录，但这似乎很迂回。

在ts模板中，有一个迭代变量#ee用于从 javascript 数组构建 html 表。有什么办法可以让我通过同样的 #ee直接变量到我的事件监听器？

Answer 1

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

你可以只传递迭代变量ee

在 *ngFor 中声明变量的语法是 let 而不是 # 几个月了。