Forms angular2中的选择标记不工作

我不知道下面的代码有什么问题。但是选择标记不会显示可用的选项

<select class="selectpicker" data-style="btn btn-primary btn-round" title="Select a Department"
  [(ngModel)]="selectedDepartment" required>
              <option *ngFor="let department of departments"
                [ngValue]="department">
                {{department.name}}
              </option>
  </select>

user component.ts

@Component({
  selector: 'nb-select-department',
  templateUrl: './select-department.component.html',
  styleUrls: ['./select-department.component.css']
})
export class SelectDepartmentComponent implements OnInit {

  @Input() departments: any;
  @Output() done: EventEmitter<any> = new EventEmitter();
  selectedDepartment: any = {'name': 'Select A Department'};

  constructor() { }
}

@Component({
  selector: 'nb-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {

...
ngOnInit() {
    console.log(JSON.stringify(this.user));
    this.buildForm();
    this.getDepartments();
  }

  getDepartments() {
    this.organisationService.listDepartments(this.user.userKey).subscribe(
      data => {
        this.departments = data.departments;
        console.log(JSON.stringify(this.departments)); 
        // [{"department_key":"ahVlfm5leHRib29raW5nLWJhY2tlbmRyMAsSDE9yZ2FuaXNhdGlvbhiAgICA-MKECgwLEgpEZXBhcnRtZW50GICAgICAgIAJDA","name":"Development"},{"department_key":"ahVlfm5leHRib29raW5nLWJhY2tlbmRyMAsSDE9yZ2FuaXNhdGlvbhiAgICA-MKECgwLEgpEZXBhcnRtZW50GICAgICAgIAKDA","name":"Management"}]
      },
      error => {
        console.log(error);
      }
    );
  }
}

user form component.html

<nb-select-department [departments]="departments" (done)="onSelectDeperatmentDone($event)"></nb-select-department>

---

自从数据异步以来，您是否尝试过将

*ngIf

:

<nb-select-department *ngIf="departments" [departments]="departments" (done)="onSelectDeperatmentDone($event)"></nb-select-department> 

在子组件中：

@Output() done = new EventEmitter<Object>();

emitDepartment(department) {
   this.done.emit(department);
}

done(department) {
  //do whatever you want...
}

---

由于数据是异步的，您是否尝试过将

*ngIf

：

<nb-select-department *ngIf="departments" [departments]="departments" (done)="onSelectDeperatmentDone($event)"></nb-select-department> 

在子组件中：

@Output() done = new EventEmitter<Object>();

emitDepartment(department) {
   this.done.emit(department);
}

done(department) {
  //do whatever you want...
}

---

你看，它正确地显示了部门值

开发

，

管理

，但单击下拉列表，它什么也不显示..请共享你的ts代码..部门值在哪里？@AJT82与获取部门相关的代码非常重要吗？是的，因为这似乎是个问题：）你看，它正确地显示部门值

开发

，

管理

，但单击下拉列表，它什么也不显示..请共享您的ts代码..部门值在哪里？@AJT_82与获取部门相关的代码非常重要吗？是的，因为这似乎是问题所在：）现在我希望所选部门从“选择部门”组件到“用户表单”组件。即，在选择部门时，

selectedDepartment

值会更新。。现在，我想在selectedDepartment中发生更改时将此值发送给父组件。通过

（ngModelChange）=“onchangedDepartment（）”

进行计算，所以当任何模型变量发生更改时，都会触发此值，对吗？您在吗？一个小小的疑问。。现在，选择框默认显示

选择一个部门

。但是我想显示department的值（如果存在），或者默认的

选择depart

stmt<代码>selectedDepartment={'name'：部门| |'选择一个部门'}部门来自用户表单组件的位置。在调试器上，它正确显示部门值，但选择框上的值不会更改。现在，我希望所选部门从“选择部门”组件到“用户表单”组件。即，在选择部门时，

selectedDepartment

值会更新。。现在，我想在selectedDepartment中发生更改时将此值发送给父组件。通过

（ngModelChange）=“onchangedDepartment（）”

进行计算，所以当任何模型变量发生更改时，都会触发此值，对吗？您在吗？一个小小的疑问。。现在，选择框默认显示

选择一个部门

。但是我想显示department的值（如果存在），或者默认的

选择depart

stmt<代码>selectedDepartment={'name'：部门| |'选择一个部门'}部门来自用户表单组件的位置。在调试器上，它正确显示部门值，但选择框上的值不会更改。