[英]Angular2 select not working
Angular2 select always showing Select A Department
as default value. Angular2 select始终显示“ Select A Department
作为默认值。
user-form.comp.html
<div class="form-group label-floating" *ngIf="user.isAdmin || user.adminKey">
<nb-select-department *ngIf="departments" [previousDepartment]="user.department" [departments]="departments" (done)="onSelectDeperatmentDone($event)"></nb-select-department>
</div>
usr-form.comp.ts
@ViewChild(SelectDepartmentComponent)
private selectDepartmentComponent: SelectDepartmentComponent;
This method gets called if there any change in the user-form component. 如果用户窗体组件中有任何更改,则调用此方法。
ngOnChanges() {
console.log(this.user);
if (this.user.department) {
this.selectDepartmentComponent.setPreviousDepartment(this.user.department);
}
}
sel-dept-com.html
<select class="selectpicker" data-style="btn btn-primary btn-round" title="Select A department" [(ngModel)]="selectedDepartment"
(ngModelChange)="onChangeDepartment()" required>
<option *ngFor="let department of departments"
[ngValue]="department">
{{department.name}}
</option>
</select>
sel-dept-comp.ts
@Input() departments: any;
@Input() previousDepartment: string;
@Output() done: EventEmitter<any> = new EventEmitter();
private selectedDepartment: any;
value: string;
constructor() { }
ngOnInit() {
this.setPreviousDepartment(this.previousDepartment);
}
setPreviousDepartment(deptName: string) {
for(let dept of this.departments) {
if(dept.name === deptName) {
this.selectedDepartment = dept;
}
}
}
onChangeDepartment() {
this.done.emit(this.selectedDepartment);
}
Note that setPreviousDepartment
method should be called from the parent component. 请注意,应该从父组件调用setPreviousDepartment
方法。 But on the chrome dev tools, Development
dept got selected, ie, selected=True
attribute set on development
option. 但是在chrome开发工具上, Development
部门被选中,即在development
选项上设置了selected=True
属性。
<nb-select-department _ngcontent-fmh-68="" _nghost-fmh-69="" ng-reflect-departments="[object Object]" ng-reflect-previous-department="Development"><div class="btn-group bootstrap-select ng-untouched ng-pristine ng-invalid open"><button type="button" class="dropdown-toggle bs-placeholder btn btn-primary btn-round" data-toggle="dropdown" role="button" title="Select A department" aria-expanded="true"><span class="filter-option pull-left">Select A department</span> <span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open" role="combobox" style="max-height: 179px; overflow: hidden; min-height: 0px;"><ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 179px; overflow-y: auto; min-height: 0px;"><li data-original-index="1"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">
Development
</span><span class="material-icons check-mark"> done </span></a></li></ul></div><select _ngcontent-fmh-69="" class="selectpicker ng-untouched ng-pristine ng-valid" data-style="btn btn-primary btn-round" required="" title="Select A department" tabindex="-98" ng-reflect-model="Development"><option class="bs-title-option" value="">Select A department</option>
<!--template bindings={
"ng-reflect-ng-for-of": "[object Object]"
}--><option _ngcontent-fmh-69="" value="0: Object" ng-reflect-ng-value="[object Object]" selected="true">
Development
</option>
</select></div>
</nb-select-department>
selectedDepartment
is a string
where department
is an object
they don't have a relation in between. selectedDepartment
是一个string
,其中department
是它们之间没有关系的object
。 If you want to dynamically change ngValue
with ngModel
, they should have the same object reference . 如果要使用ngModel
动态更改ngValue
,则它们应具有相同的对象引用 。
So, selectedDepartment
should be selected from your departments
array. 所以, selectedDepartment
应该从你选择departments
数组。
Example Plunker: http://plnkr.co/edit/EfFqXSWbash2jOSxu8vE?p=preview 样例示例: http ://plnkr.co/edit/EfFqXSWbash2jOSxu8vE?p=preview
The selected
attribute is meaningless if you use ngModel
. 如果使用ngModel
则selected
属性没有意义。
If selectedDepartment
contains the value of the element you want have selected, it will be shown as selected anyway. 如果selectedDepartment
包含要选择的元素的值,则无论如何它将显示为选中状态。
Just remove 只需删除
[attr.selected]="department.name === selectedDepartment"
There might be other problems though. 但是,可能还有其他问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.