Angular2选择不起作用

Question

Angular2 选择始终显示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 开发工具上，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

如果使用ngModel，selected 属性将毫无意义。

如果selectedDepartment 包含您要选择的元素的值，它将显示为已选择。

删除

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

但可能还有其他问题。