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

我有两个组件，一个是员工，另一个是部门。我想做一个下拉，以便员工可以选择一个部门。Angular 2 JS下拉菜单，从另一个组件选择项目

我实现了一个方法，让我的员工组件内部各部门：

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>

来源

2016-02-26 Yuniku_123

您选择框的Click事件绑定到getAll()方法，但被称为getAllDepartment()您已经定义的方法。

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

这就是说，我不确定为什么每次单击下拉菜单时都要重新加载部门。如果期望的行为是在组件初始化时加载一次部门，则应该为该组件添加一个constructor()方法，该方法将自动调用。

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

来源

2016-02-26 10:29:49 gamesmad

Omg，我是盲人！谢谢，它现在可行！：D –

但是，我遇到了一个问题，当我从下拉菜单中选择某项时，项目未被选中（我可以在桌面上看到它）。 –

我不清楚这个问题。根据具体情况创建另一个问题。 – gamesmad

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

回答

相关问题