Angular2選擇不起作用

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開發工具上， Development部門被選中，即在development選項上設置了selected=True屬性。

<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 。 如果要使用ngModel動態更改ngValue ，則它們應具有相同的對象引用 。

所以， selectedDepartment應該從你選擇departments數組。

樣例示例： http ://plnkr.co/edit/EfFqXSWbash2jOSxu8vE?p=preview

Answer 2

如果使用ngModel則selected屬性沒有意義。

如果selectedDepartment包含要選擇的元素的值，則無論如何它將顯示為選中狀態。

只需刪除

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

但是，可能還有其他問題。