Angular2选择不起作用 [英] Angular2 select not working

问题描述

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>&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>

推荐答案

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选择不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！