Angular2 select not working

Question

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; 

Этот метод вызывается, если есть какие-либо изменения в пользовательском-формы компонента.

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 dev выбрано Development, т. Е. selected=True атрибут, установленный на development.

<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 является string где department является object У них нет отношения между ними. Если вы хотите динамически изменить ngValue с ngModel, , они должны иметь одинаковую ссылку на объект.

Итак, selectedDepartment должен быть выбран из вашего массива departments.

Пример Plunker: http://plnkr.co/edit/EfFqXSWbash2jOSxu8vE?p=preview

Answer 2

Атрибут selected не имеет смысла, если вы используете ngModel.

Если selectedDepartment содержит значение элемента, который вы хотите выбрать, он будет показываться как выбранный в любом случае.

Просто удалите

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

Там могут быть другие проблемы, хотя.