Question

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

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

但访问chrome开发人员工具时会显示这些值。

<nb-select-department _ngcontent-umj-27="" _nghost-umj-28="" ng-reflect-departments="[object Object],[object Object]"><div class="btn-group bootstrap-select ng-untouched ng-pristine ng-valid 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: 86px; overflow: hidden; min-height: 0px;"><ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 86px; overflow-y: auto; min-height: 0px;"></ul></div><select _ngcontent-umj-28="" class="selectpicker ng-untouched ng-pristine ng-valid" data-style="btn btn-primary btn-round" required="" title="Select a Department" ng-reflect-model="[object Object]" tabindex="-98"><option class="bs-title-option" value="">Select a Department</option>
              <!--template bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object]"
}--><option _ngcontent-umj-28="" value="0: Object" ng-reflect-ng-value="[object Object]">
                Development
              </option><option _ngcontent-umj-28="" value="1: Object" ng-reflect-ng-value="[object Object]">
                Management
              </option>
            </select></div></nb-select-department>

select-department.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() { }
}

user-component.ts

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

Answer 1

由于数据异步，您尝试了*ngIf：

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

编辑：将数据传回父母：

在您的选择 - 下拉列表（子项）中，您应该有更改事件，或者建议使用PO，(ngModelChange)：

(change)=emitDepartment(department)

在您的子组件中：

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

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

父html保持不变，即您的父组件：

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

angular2中的选择标记不起作用

1 个答案: