角度2：组件可重用性。无法绑定数据

Question

我尝试绑定组件中的数据，以便为员工使用select和select department。 我的组件代码如下所示：

  getAll(){
    if(this.searchString.length > 0){
        this._employeeService.getEmployeesBySearch(this.searchString,this.pageNumber, this.pageSize).subscribe(data => {this.bindData(data,this.departments)});
    }else{
         this._employeeService.getEmployees(this.pageNumber, this.pageSize).subscribe(data => {this.bindData(data, this.departments)});
    }
  }


   bindData(data,departments) {
            this.employees = data;
            for (var i = 0; i < this.employees.length; i++) {
                for (var j = 0; j < this.departments.length; j++) {
                    if (this.departments[j].departmentNo == this.employees[i].departmentNo) {
                        this.employees[i].Department = {
                            departmentNo: this.departments[j].departmentNo,
                            departmentName: this.departments[j].departmentName,
                            departmentLocation: this.departments[j].departmentLocation
                        }

                        };
                        break;
                    }
                }
            }

我的html表非常简单。

  <table align="center">
            <thead>
                <tr>                   
                    <td><strong>Employee</strong></td>
                     <td><strong>Department</strong></td>   
                    <td><strong>Salary</strong></td>
                    <td><strong>Edit</strong></td>
                    <td><strong>Delete</strong></td>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="#employee of employees| searchString:listFilter.value">
                    <td>{{employee.employeeName}}</td>
                    <td>{{employee.Department.departmentNo}}-{{employee.Department.departmentName}} </td>
                    <td>{{employee.salary}}</td>
                    <td><button class="btnEdit" (click)="showEdit(employee)" >Edit</button></td>
                    <td><button class="btnDelete" (click)=deleteEmployee(employee)>Delete</button></td>             
                </tr>

            </tbody>
        </table>

   <br/><br/>

问题是它会抛出错误：

  

在[employees |中]尝试diff'[object Object]'时出错searchString：EmployeeComponent @ 30：20中的listFilter.value。

我真的不知道为什么会发生这种情况，因为在我的模型中（从后端我已经包含了Department对象）。没有绑定一切正常，任何建议？ （在Angular 1中，这种方法就像一个魅力）。

data看起来像

"[ {
    "employeeNo":4,
    "departmentNo":4,
    "employeeName":"Branka Bilic",
    "salary":30000.0000,
    "lastModifyDate":"2016-02-01T00:00:00",
    "Department":{‌​       
        "departmentNo":4,
        "departmentName":"Sales",
        "departmentLocation":"Pula"
    }, etc...
}]"

我按员工姓名搜索的管道显示：

import {Pipe} from 'angular2/core';

@Pipe({
    name: "searchString"   
})
export class SearchPipe{
    transform(value: any, args: string[]): any{
        let filter = args[0].toLocaleLowerCase();
       return filter ? value.filter(employee => employee.employeeName.toLocaleLowerCase().indexOf(filter) != -1) : value;
    }

}