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

【问题标题】：How to pass respective row data to component using *ngFor+angular4如何使用 *ngFor+angular4 将相应的行数据传递给组件
【发布时间】：2017-11-22 08:48:54
【问题描述】：

我有如下的 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

【问题讨论】：

标签： angular ngfor

【解决方案1】：

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

事情是这样的：

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

希望这会有所帮助！

【讨论】：