Angular2 select non-working

Question

Angular2 always shows Select A Department as the default.

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 is called if there are any changes to the custom 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 the setPreviousDepartment method must be called from the parent component. But on chrome dev tools, Development selected, i.e. The selected=True attribute set to the 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>&nbsp;<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> 

Answer 1

selectedDepartment is a string , where department is an object , they have no relationship between them. If you want to dynamically change ngValue to ngModel , they must have the same object reference .

So, selectedDepartment should be selected from the departments array.

Plunker example: http://plnkr.co/edit/EfFqXSWbash2jOSxu8vE?p=preview

Answer 2

The selected attribute does not make sense if you are using ngModel .

If selectedDepartment contains the value of the item you want to select, it will show as selected.

Just uninstall

 [attr.selected]="department.name === selectedDepartment" 

However, there may be other problems.