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>
答
您选择框的Click事件绑定到getAll()
方法,但被称为getAllDepartment()
您已经定义的方法。
您需要将该事件绑定到现有的方法名称。
这就是说,我不确定为什么每次单击下拉菜单时都要重新加载部门。如果期望的行为是在组件初始化时加载一次部门,则应该为该组件添加一个constructor()
方法,该方法将自动调用。
constructor() {
this._employeeService.getAllDepartment()
.subscribe(data => this.departments = data.json());
}
Omg,我是盲人!谢谢,它现在可行! :D –
但是,我遇到了一个问题,当我从下拉菜单中选择某项时,项目未被选中(我可以在桌面上看到它)。 –
我不清楚这个问题。根据具体情况创建另一个问题。 – gamesmad