Angular 2 JS下拉菜單，從另一個組件選擇項目

Question

我有兩個組件，一個是員工，另一個是部門。我想做一個下拉，以便員工可以選擇一個部門。

我實現了一個方法，讓我的員工組件內部各部門：

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> 

但注意到發生。
使下拉工作和選擇項目的最佳方式是什麼？ 這是ahtml在那裏我有選擇：

<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> 

Answer 1

您選擇框的Click事件綁定到getAll()方法，但被稱爲getAllDepartment()您已經定義的方法。

您需要將該事件綁定到現有的方法名稱。

這就是說，我不確定爲什麼每次單擊下拉菜單時都要重新加載部門。如果期望的行爲是在組件初始化時加載一次部門，則應該爲該組件添加一個constructor()方法，該方法將自動調用。

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