Angular 2 JS下拉菜单，从另一个组件中选择项目答案

【问题标题】：Angular 2 JS dropdown, select item from another componentAngular 2 JS下拉菜单，从另一个组件中选择项目
【发布时间】：2016-06-09 12:08:54
【问题描述】：

我有两个组成部分，一个是员工，另一个是部门。我想做一个下拉列表，以便员工可以选择一个部门。

我实现了一种将所有部门都包含在我的员工组件中的方法：

getAllDepartment(){
  this._employeeService.getAllDepartment()
 .subscribe(data => this.departments = data.json());
}

在我的员工 html 中选择如下所示：

<label for="editTitle">Department:</label><br>
  <select  [(ngModel)]="newItem.Department" (click)="getAll()" style="width: 180px">
  <option *ngFor="#department of departments" [value]="department.departmentNo">{{department.departmentName}}</option>
  </select>

但注意到发生了。
使此下拉菜单起作用并选择项目的最佳方法是什么？这是我选择的一个html：

  <form  #f="ngForm" [hidden]="!showAddView" align="center">
        <div>
            <label for="editTitle">Employee No:</label><br>
             <input type="text" [(ngModel)]="newItem.employeeNo" ngControl="employeeNo" required >    

        </div>
        <div>
            <label for="editAbrv">Employee name:</label><br>
              <input type="text" [(ngModel)]="newItem.employeeName" ngControl="demployeeName" required >    
        </div>

            <div>
            <label for="editTitle">Department:</label><br>
            <select [(ngModel)]="newItem.departmentNo" (click)="getAll()" style="width: 180px">
               <option *ngFor="#department of departments" [value]="department.departmentNo">{{department.departmentName}}</option>
           </select>
        </div>

        <div>
            <label for="editAbrv">Salary:</label><br>
             <input type="text" [(ngModel)]="newItem.salary" ngControl="salary" required>    
        </div>

        <div>
            <a href="javascript:void(0);" (click)="addEmployee(newItem)" title="Add">
                Save
            </a>
            <a href="javascript:void(0);" (click)="showHide($event)" >
                Cancel
            </a>
        </div>
</form>

【问题讨论】：

标签： select drop-down-menu angular

【解决方案1】：

您将选择框的点击事件绑定到getAll() 方法，但您定义的方法称为getAllDepartment()。

您需要将事件绑定到现有方法名称。

话虽如此，我不确定您为什么要在每次单击下拉列表时重新加载部门。如果期望的行为是在组件初始化时加载一次部门，则应在组件中添加constructor() 方法，该方法将被自动调用。

constructor() {
    this._employeeService.getAllDepartment()
        .subscribe(data => this.departments = data.json());
}

【讨论】：

但是，我有一个问题，当我从下拉列表中选择一些东西时，项目没有被选中（我可以在桌子上看到它）。
我不清楚这个问题。用具体细节创建另一个问题。