如何使用* ngFor + angular4将相应的行数据传递给组件

时间:2017-11-22 00:36:28

标签: angular ngfor

我有html如下。需要帮忙。我不是Angular的专长。

<tbody>       
        <tr  *ngFor="let data of employeeFilterLists">
            <td>{{data.Code}}</td>
            <td (click)="selectEmployee('{{data.Code}}')">{{data.FirstName}} {{data.LastName}}</td>
            <td>{{data.Salary}}</td>
        </tr>       
</tbody>

现在,我已经编写了组件方法来捕获值以从方法中调用另一个组件。

selectEmployee(mdData:string){
  console.log("Choose Model...."+ mdData);
}

我收到以下错误。

Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 16 in [selectEmployee('{{data.Code}}')] in ng:///AppModule/EmployeeComponent.html@16:16 ("  <tr  *ngFor="let data of employeeFilterLists">
            <td>{{data.Code}}</td>
            <td [ERROR ->](click)="selectEmployee('{{data.Code}}')">{{data.FirstName}} {{data.LastName}}</td>
            <td>{"): ng:///AppModule/EmployeeComponent.html@16:16
Parser Error: Got interpolation ({{}}) where expression was expected at column 16 in [selectEmployee('{{data.Code}}')] in ng:///AppModule/EmployeeComponent.html@16:16 ("ists">
            <td>{{data.Code}}</td>
            <td (click)="selectEmployee('{{data.Code}}')">[ERROR ->]{{data.FirstName}} {{data.LastName}}</td>
            <td>{{data.Salary}}</td>
        </tr>
"): ng:///AppModule/EmployeeComponent.html@16:58
Parser Error: Got interpolation ({{}}) where expression was expected at column 16 in [selectEmployee('{{data.Code}}')] in ng:///AppModule/EmployeeComponent.html@16:16 ("(click)="selectEmployee('{{data.Code}}')">{{data.FirstName}} {{data.LastName}}</td>
            <td>[ERROR ->]{{data.Salary}}</td>
        </tr>

"): ng:///AppModule/EmployeeComponent.html@17:16

1 个答案:

答案 0 :(得分:1)

您应该删除selectEmployee方法中的{{}}

这是这样的:

<td (click)="selectEmployee(data.Code)">{{data.FirstName}} {{data.LastName}}</td>

希望这有帮助!