问题描述
Angular2 select始终显示 Select A Department
作为默认值.
Angular2 select always showing Select A Department
as default value.
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);
}
请注意,应从父组件中调用 setPreviousDepartment
方法.但是在chrome开发工具上,选择了 Development
部门,即在 development
选项上设置了 selected = True
属性.
Note that setPreviousDepartment
method should be called from the parent component. But on the chrome dev tools, Development
dept got selected, ie, selected=True
attribute set on development
option.
<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
是 string
,其中 Department
是 object
它们之间没有关系.如果要使用 ngModel
动态更改 ngValue
,它们应该具有相同的对象引用.
selectedDepartment
is a string
where department
is an object
they don't have a relation in between. If you want to dynamically change ngValue
with ngModel
, they should have the same object reference.
因此,应从 departments
数组中选择 selectedDepartment
.
So, selectedDepartment
should be selected from your departments
array.
示例柱塞: http://plnkr.co/edit/EfFqXSWbash2jOSxu8vE?p=preview
这篇关于Angular2选择不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!